David Baron
10fbc0fa1e
Automatic update from web-platform-tests Improve left/right arrow handling for menulists that don't have adjacent ones. A menulist invoked by a button, or a menulist invoked by a menuitem in a menubar that only has one menuitem, need to have different keyboard behavior for right/left arrow keys than menulists in a menubar with multiple menuitems. This implements that behavior so that right/left arrows don't unexpectedly close the menu when there's nothing else to move to. In order for the revised tests (using Escape) to pass, this also changes how the previously-focused-element for the popover is set when submenus are opened with a click. Bug: 406566432 Change-Id: Ib36c1b319e60264c6119e48b010606f8681615aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8070218 Commit-Queue: David Baron <dbaron@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1660630} -- wpt-commits: a19af30338751ef5bd7412a987e187d2faaa8ca6 wpt-pr: 61222
97 lines
4.2 KiB
HTML
97 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta name="timeout" content="long">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<link rel=author href=mailto:dizhangg@chromium.org>
|
|
<link rel=help href=https://open-ui.org/components/menu.explainer>
|
|
|
|
<menubar>
|
|
<submenu>
|
|
<menuitem id=btn>Open</menuitem>
|
|
<menulist id="list">
|
|
<menuitem id="A1">Command A1</menuitem>
|
|
<menuitem id="A2">Command A2</menuitem>
|
|
<menuitem id="A3">Command A3</menuitem>
|
|
</menulist>
|
|
</submenu>
|
|
</menubar>
|
|
|
|
<menubar id="bar">
|
|
<menuitem id="B1">Command B1</menuitem>
|
|
<menuitem id="B2">Command B2</menuitem>
|
|
<menuitem id="B3">Command B3</menuitem>
|
|
</menubar>
|
|
|
|
<style>
|
|
.nodelay menuitem {
|
|
interest-delay: 0s;
|
|
}
|
|
.longdelay menuitem {
|
|
interest-delay: 1000s;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
|
|
const Enter = '\uE007';
|
|
const Esc = '\uE00C';
|
|
const ArrowLeft = '\uE012';
|
|
const ArrowUp = '\uE013';
|
|
const ArrowRight = '\uE014';
|
|
const ArrowDown = '\uE015';
|
|
|
|
[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);
|
|
// Opening a submenu with a pointer input doesn't move focus:
|
|
// https://github.com/openui/open-ui/issues/1439
|
|
assert_equals(document.activeElement, btn, 'clicking btn should not move focus.');
|
|
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, A3, 'arrow up key loops.');
|
|
await test_driver.send_keys(document.activeElement, ArrowDown);
|
|
assert_equals(document.activeElement, A1, 'arrow down key loops.');
|
|
|
|
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 (1).');
|
|
await test_driver.send_keys(document.activeElement, Esc);
|
|
assert_equals(document.activeElement, btn, 'escape closes the menulist and focus on invoker (1).');
|
|
|
|
await test_driver.click(btn);
|
|
await test_driver.send_keys(document.activeElement, ArrowDown);
|
|
assert_equals(document.activeElement, A1, 'arrow down moves focus into menulist (2).');
|
|
await test_driver.send_keys(document.activeElement, Esc);
|
|
assert_equals(document.activeElement, btn, 'escape closes the menulist and focus on invoker (2).');
|
|
}, `Should use arrow keys to move between menuitems in menulist${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, B3, 'arrow left key loops.');
|
|
await test_driver.send_keys(document.activeElement, ArrowRight);
|
|
assert_equals(document.activeElement, B1, 'arrow right key loops.');
|
|
}, `Should use arrow keys to move between menuitems in menubar${description}`);
|
|
});
|
|
|
|
</script>
|