Skip to content

Make ESC lose interest in all elements that have interest #54668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 3, 2025
Merged

Make ESC lose interest in all elements that have interest #54668

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 59 additions & 6 deletions html/semantics/the-button-element/interest-for/interestfor-keyboard-behavior.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down Expand Up @@ -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>