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
119 lines
4.5 KiB
HTML
119 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<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="https://dbaron.org/">
|
|
<link rel=help href=https://open-ui.org/components/menu.explainer>
|
|
|
|
<menubar>
|
|
<submenu>
|
|
<menuitem id="file">File</menuitem>
|
|
<menulist>
|
|
<menuitem id="file_new">New</menuitem>
|
|
<menuitem id="file_open">Open</menuitem>
|
|
</menulist>
|
|
</submenu>
|
|
<submenu>
|
|
<menuitem id="edit">Edit</menuitem>
|
|
<menulist>
|
|
<menuitem id="edit_cut">Cut</menuitem>
|
|
<menuitem id="edit_copy">Copy</menuitem>
|
|
</menulist>
|
|
</submenu>
|
|
<submenu>
|
|
<menuitem id="help">Help</menuitem>
|
|
<menulist>
|
|
<menuitem id="help_about">About</menuitem>
|
|
</menulist>
|
|
</submenu>
|
|
</menubar>
|
|
|
|
<menubar>
|
|
<submenu>
|
|
<menuitem id="zoom">Zoom</menuitem>
|
|
<menulist>
|
|
<menuitem id="zoom_bigger">Bigger</menuitem>
|
|
<menuitem id="zoom_smaller">Smaller</menuitem>
|
|
</menulist>
|
|
</submenu>
|
|
</menubar>
|
|
|
|
<button id="actions_button" popovertarget=actions>Actions</button>
|
|
|
|
<menulist id="actions">
|
|
<menuitem id="actions_go">Go</menuitem>
|
|
<menuitem id="actions_stop">Stop</menuitem>
|
|
</menulist>
|
|
|
|
<script>
|
|
|
|
const Enter = '\uE007';
|
|
const Esc = '\uE00C';
|
|
const ArrowLeft = '\uE012';
|
|
const ArrowUp = '\uE013';
|
|
const ArrowRight = '\uE014';
|
|
const ArrowDown = '\uE015';
|
|
|
|
function e(id) {
|
|
return document.getElementById(id);
|
|
}
|
|
|
|
promise_test(async t => {
|
|
t.add_cleanup(async () => { await test_driver.send_keys(document.activeElement, Esc); });
|
|
e("file").focus();
|
|
assert_equals(document.activeElement, e("file"));
|
|
await test_driver.send_keys(document.activeElement, Enter);
|
|
assert_equals(document.activeElement, e("file_new"));
|
|
await test_driver.send_keys(document.activeElement, ArrowRight);
|
|
assert_equals(document.activeElement, e("edit"));
|
|
await test_driver.send_keys(document.activeElement, ArrowRight);
|
|
assert_equals(document.activeElement, e("help"));
|
|
await test_driver.send_keys(document.activeElement, ArrowRight);
|
|
assert_equals(document.activeElement, e("file"));
|
|
await test_driver.send_keys(document.activeElement, Enter);
|
|
assert_equals(document.activeElement, e("file_new"));
|
|
await test_driver.send_keys(document.activeElement, ArrowLeft);
|
|
assert_equals(document.activeElement, e("help"));
|
|
await test_driver.send_keys(document.activeElement, ArrowLeft);
|
|
assert_equals(document.activeElement, e("edit"));
|
|
await test_driver.send_keys(document.activeElement, Enter);
|
|
assert_equals(document.activeElement, e("edit_cut"));
|
|
await test_driver.send_keys(document.activeElement, ArrowLeft);
|
|
assert_equals(document.activeElement, e("file"));
|
|
}, "side arrow keys should move between menus in a menubar with multiple menus");
|
|
|
|
promise_test(async t => {
|
|
t.add_cleanup(async () => { await test_driver.send_keys(document.activeElement, Esc); });
|
|
e("zoom").focus();
|
|
assert_equals(document.activeElement, e("zoom"));
|
|
await test_driver.send_keys(document.activeElement, ArrowRight);
|
|
assert_equals(document.activeElement, e("zoom"));
|
|
await test_driver.send_keys(document.activeElement, ArrowLeft);
|
|
assert_equals(document.activeElement, e("zoom"));
|
|
await test_driver.send_keys(document.activeElement, Enter);
|
|
assert_equals(document.activeElement, e("zoom_bigger"));
|
|
await test_driver.send_keys(document.activeElement, ArrowRight);
|
|
assert_equals(document.activeElement, e("zoom_bigger"));
|
|
await test_driver.send_keys(document.activeElement, ArrowLeft);
|
|
assert_equals(document.activeElement, e("zoom_bigger"));
|
|
}, "side arrow keys should no-op in a menubar with just one menu");
|
|
|
|
promise_test(async t => {
|
|
t.add_cleanup(async () => { await test_driver.send_keys(document.activeElement, Esc); });
|
|
e("actions_button").focus();
|
|
assert_equals(document.activeElement, e("actions_button"));
|
|
await test_driver.send_keys(document.activeElement, ArrowRight);
|
|
assert_equals(document.activeElement, e("actions_button"));
|
|
await test_driver.send_keys(document.activeElement, ArrowLeft);
|
|
assert_equals(document.activeElement, e("actions_button"));
|
|
await test_driver.send_keys(document.activeElement, Enter);
|
|
assert_equals(document.activeElement, e("actions_go"));
|
|
await test_driver.send_keys(document.activeElement, ArrowRight);
|
|
assert_equals(document.activeElement, e("actions_go"));
|
|
await test_driver.send_keys(document.activeElement, ArrowLeft);
|
|
assert_equals(document.activeElement, e("actions_go"));
|
|
}, "side arrow keys should no-op in a menulist invoked by a button");
|
|
|
|
</script>
|