Bug 1986710 [wpt PR 54668] - Make ESC lose interest in all elements that have interest, a=testonly

Automatic update from web-platform-tests
Make ESC lose interest in all elements that have interest

This CL implements the behavior described in the spec PR:

whatwg/html#11006

That is: the ESC key is handled very much like popovers - the
focus doesn't need to be on the invoker for ESC to work. Also,
hitting ESC loses interest in all elements that currently
have interest, in reverse order. A test is added to confirm this.

Note: I purposely did not use close watcher here, since I don't
believe the close watcher stack should get involved. E.g. the
android Back button should just navigate back, and not first lose
interest in things. Closing a popover or modal dialog is different
than a tooltip being open on a page.

Bug: 326681249
Change-Id: I33cc2742a677f330d90b83c29b18b22bf49b716e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6900679
Reviewed-by: Joey Arhar <[email protected]>
Auto-Submit: Mason Freed <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1510373}

--

wpt-commits: d2c3a6825856a39ca05b811576676c4488ccf3e1
wpt-pr: 54668

Author: mfreed7

testing/web-platform/tests/html/semantics/the-button-element/interest-for/interestfor-keyboard-behavior.tentative.html

@@ -132,7 +132,7 @@
         'showing interest in another trigger should lose interest in the first, then gain interest in second');
     verifyInterest(another,`After show interest in ${another.id}`);
     await sendLoseInterestHotkey();
-    assert_array_equals(events,['target interest','target loseinterest (cancelable)','anothertarget interest','anothertarget loseinterest (cancelable)']);
+    assert_array_equals(events,['target interest','target loseinterest (cancelable)','anothertarget interest','anothertarget loseinterest (not cancelable)']);
     verifyInterest(undefined,`After lose interest in ${another.id}`);
     assert_false(target.matches(':popover-open'));
     assert_false(anothertarget.matches(':popover-open'));
@@ -163,14 +163,67 @@
     assert_false(target.matches(':popover-open'),'anothertarget popover opens, closing target');
     assert_true(anothertarget.matches(':popover-open'));
     await sendLoseInterestHotkey();
-    assert_array_equals(events,['anothertarget loseinterest (cancelable)'],'Lose interest hot key on focused element loses just interest in that element');
+    assert_array_equals(events,['anothertarget loseinterest (not cancelable)', 'target loseinterest (not cancelable)'],'Lose interest hot key loses interest in all elements');
     assert_false(target.matches(':popover-open'));
     assert_false(anothertarget.matches(':popover-open'));
-    shouldCancelLoseInterest = false;
-    await focusOn(el);
-    await sendLoseInterestHotkey();
-    assert_array_equals(events,['anothertarget loseinterest (cancelable)','target loseinterest (cancelable)'],'Now both lost interest');
     verifyInterest(undefined,`Nothing has interest now`);
   }, `Canceling loseinterest caused by keyboard-gained interest cancels interest, ${description}`);
 });
 </script>
+
+<button id="esc_invoker1" class="longhide" interestfor="esc_target1">ESC Invoker 1</button>
+<div id="esc_target1">Non-popover target for ESC test</div>
+<button id="esc_invoker2" class="longhide" interestfor="esc_target2">ESC Invoker 2</button>
+<div id="esc_target2">Non-popover target for ESC test</div>
+<button id="esc_invoker3" class="longhide" interestfor="esc_target3">ESC Invoker 3</button>
+<div id="esc_target3">Non-popover target for ESC test</div>
+
+<script>
+promise_test(async function (t) {
+  const invoker1 = document.getElementById('esc_invoker1');
+  const target1 = document.getElementById('esc_target1');
+  const invoker2 = document.getElementById('esc_invoker2');
+  const target2 = document.getElementById('esc_target2');
+  const invoker3 = document.getElementById('esc_invoker3');
+  const target3 = document.getElementById('esc_target3');
+  const otherbutton = document.getElementById('otherbutton');
+  t.add_cleanup(() => otherbutton.focus());
+
+  let events = [];
+  const signal = t.get_signal();
+  [target1, target2, target3].forEach(target => {
+    target.addEventListener('interest',(e) => events.push(`${e.source.id} interest`),{signal});
+    target.addEventListener('loseinterest',(e) => events.push(`${e.source.id} loseinterest`),{signal});
+    // These loseinterest events should not be cancelable:
+    target.addEventListener('loseinterest',(e) => e.preventDefault(),{signal});
+  });
+
+  // Invoke them in non-tree order:
+  await focusOn(invoker1);
+  await focusOn(invoker3);
+  await focusOn(invoker2);
+  assert_array_equals(events,
+    ['esc_invoker1 interest','esc_invoker3 interest','esc_invoker2 interest'],
+    'Events after gaining interest');
+  events = [];
+
+  // Hit ESC once, while focused on the body
+  document.body.focus();
+  await waitForRender();
+  assert_true(invoker1.matches(':interest-source'), 'invoker1 should still have interest');
+  assert_true(invoker3.matches(':interest-source'), 'invoker3 should still have interest');
+  assert_true(invoker2.matches(':interest-source'), 'invoker2 should still have interest');
+  const kEscape = '\uE00C';
+  await new test_driver.Actions()
+    .keyDown(kEscape)
+    .keyUp(kEscape)
+    .send();
+  await waitForRender();
+  assert_false(invoker2.matches(':interest-source'), 'invoker2 should lose interest');
+  assert_false(invoker1.matches(':interest-source'), 'invoker1 should lose interest');
+  assert_false(invoker3.matches(':interest-source'), 'invoker3 should lose interest');
+  assert_array_equals(events, [
+    'esc_invoker2 loseinterest', 'esc_invoker3 loseinterest', 'esc_invoker1 loseinterest'],
+    'ESC should lose interest in all invokers, in reverse order');
+}, 'ESC key dismisses all interest invokers');
+</script>