Skip to content

Reland "Make <menuitem> automatically be an interest invoker" #57113

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
chromium-wpt-export-bot merged 1 commit into from
Jan 9, 2026
Merged

Reland "Make <menuitem> automatically be an interest invoker" #57113

Show file tree
Hide file tree
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
116 changes: 64 additions & 52 deletions html/semantics/menu/tentative/focus-menu-elements-arrowoperations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,14 @@
<menuitem id="B2">Command B2</menuitem>
</menubar>

<style>
.nodelay menuitem {
interest-delay: 0s;
}
.longdelay menuitem {
interest-delay: 1000s;
}
</style>

<script>

Expand All @@ -29,61 +37,65 @@
const ArrowRight = '\uE014';
const ArrowDown = '\uE015';

promise_test(async (t) => {
await test_driver.click(btn);
assert_equals(document.activeElement, btn);
await test_driver.send_keys(document.activeElement, Enter);
assert_equals(document.activeElement, btn, 'btn invoked menulist, but focus is still on btn.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A2, 'arrow down changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow up changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow keys do not loop.');
[false, true].forEach(useInterest => {
document.body.className = useInterest ? 'nodelay' : 'longdelay';
const description = useInterest ? ' (no delays)' : ' (long delays)';
promise_test(async (t) => {
await test_driver.click(btn);
assert_equals(document.activeElement, btn);
await test_driver.send_keys(document.activeElement, Enter);
assert_equals(document.activeElement, btn, 'btn invoked menulist, but focus is still on btn.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A2, 'arrow down changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow up changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow keys do not loop.');

list.hidePopover();
await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, btn, 'arrow left close the menulist and focus on invoker.');
list.hidePopover();
await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, btn, 'arrow left close the menulist and focus on invoker.');

await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowRight);
assert_equals(document.activeElement, btn, 'arrow right close the menulist and focus on invoker.');
}, 'Should use arrow keys to move between menuitems in menulist.');
await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowRight);
assert_equals(document.activeElement, btn, 'arrow right close the menulist and focus on invoker.');
}, `Should use arrow keys to move between menuitems in menulist${description}`);

promise_test(async (t) => {
list.style.display = 'block';
await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A2, 'arrow down changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow up changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, btn, 'arrow left moves focus from menulist to invoker.');
list.style.display = '';
}, 'Should use arrow keys to move between menuitems in menulist with display block.');
promise_test(async (t) => {
list.style.display = 'block';
await test_driver.click(btn);
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, A2, 'arrow down changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, A1, 'arrow up changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, btn, 'arrow left moves focus from menulist to invoker.');
list.style.display = '';
}, `Should use arrow keys to move between menuitems in menulist with display block${description}`);

promise_test(async (t) => {
await test_driver.click(B1);
assert_equals(document.activeElement, B1);
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, B1, 'arrow up does not change current focused element.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, B1, 'arrow down does not change current focused element.');
await test_driver.send_keys(document.activeElement, ArrowRight);
assert_equals(document.activeElement, B2, 'arrow right changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, B1, 'arrow left changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, B1, 'arrow keys do not loop.');
}, 'Should use arrow keys to move between menuitems in menubar.');
promise_test(async (t) => {
await test_driver.click(B1);
assert_equals(document.activeElement, B1);
await test_driver.send_keys(document.activeElement, ArrowUp);
assert_equals(document.activeElement, B1, 'arrow up does not change current focused element.');
await test_driver.send_keys(document.activeElement, ArrowDown);
assert_equals(document.activeElement, B1, 'arrow down does not change current focused element.');
await test_driver.send_keys(document.activeElement, ArrowRight);
assert_equals(document.activeElement, B2, 'arrow right changes to next menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, B1, 'arrow left changes to previous menuitem.');
await test_driver.send_keys(document.activeElement, ArrowLeft);
assert_equals(document.activeElement, B1, 'arrow keys do not loop.');
}, `Should use arrow keys to move between menuitems in menubar${description}`);
});

</script>
27 changes: 17 additions & 10 deletions html/semantics/menu/tentative/menuitem-activate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@
width: 400px;
height: 400px;
}
menuitem {
interest-delay: 1000s;
}
</style>

<script>
Expand Down Expand Up @@ -148,15 +151,19 @@
openMainMenu.addEventListener('click',() => (++invokerClicks));
doNothing.addEventListener('click',() => (++itemClicks));
let openStateAfterPointerdown = "none";
openMainMenu.addEventListener('pointermove',() => {
// There will be two move events, one before the pointerdown and one after.
// Just capture the one after.
if (openStateAfterPointerdown === "none") {
openStateAfterPointerdown = "first-move";
} else if (openStateAfterPointerdown === "first-move") {
openStateAfterPointerdown = mainmenu.matches(":popover-open") ? "open" : "closed";
}
},{signal: t.get_signal()});
let gotPointerMove = new Promise(resolve => {
openMainMenu.addEventListener('pointermove',async () => {
// There will be two move events, one before the pointerdown and one after.
// Just capture the one after.
if (openStateAfterPointerdown === "none") {
openStateAfterPointerdown = "first-move";
} else if (openStateAfterPointerdown === "first-move") {
await waitForRender();
openStateAfterPointerdown = mainmenu.matches(":popover-open") ? "open" : "closed";
resolve();
}
},{signal: t.get_signal()});
})
await new test_driver.Actions()
.addPointer('mouse', 'mouse')
.pointerMove(0, 0, {origin: openMainMenu})
Expand All @@ -166,7 +173,7 @@
.pointerMove(doNothingCoordinates.x, doNothingCoordinates.y, {})
.pointerUp()
.send();
await waitForRender();
await gotPointerMove;
assert_equals(openStateAfterPointerdown,"open", "mainmenu popover should open after pointer down");
assert_false(mainmenu.matches(":popover-open"), "mainmenu popover should be closed after interaction");
assert_equals(invokerClicks,0, "the invoking menu didn't get a click");
Expand Down
9 changes: 7 additions & 2 deletions shadow-dom/focus-navigation/menu/tentative/focus-menu-elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,14 @@
<menuitem id="A2">Command A2</menuitem>
</menulist>

<script>
<style>
menuitem {
/* Make sure focus doesn't activate the submenu. */
interest-delay: 1000s;
}
</style>

<script>
promise_test(async () => {
let elements = [
'A',
Expand All @@ -31,5 +37,4 @@

await assert_focus_navigation_bidirectional(elements);
}, 'Should focus on menuitems in menubar only.');

</script>