corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1959902 - Ensure close button on panels is reachable by keyboard r=sidebar-reviewers,sfoster

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D245298
This commit is contained in:
Nikki Sharpley
2025-04-11 21:32:18 +00:00
parent 69aeb68502
commit fb02ebbfdb
2 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/sidebar/sidebar-panel-header.mjs
View File

@@ -36,7 +36,7 @@ export class SidebarPanelHeader extends MozLitElement {
view=${this.view} view=${this.view}
size="default" size="default"
type="icon ghost" type="icon ghost"
tabindex="-1" tabindex="1"
> >
</moz-button> </moz-button>
</div> </div>

35
browser/components/sidebar/tests/browser/browser_a11y_sidebar.js
View File

@@ -30,7 +30,7 @@ function isActiveElement(el) {
} }
add_task(async function test_keyboard_navigation() { add_task(async function test_keyboard_navigation() {
const { document } = win; const { document, SidebarController } = win;
const sidebar = document.querySelector("sidebar-main"); const sidebar = document.querySelector("sidebar-main");
info("Waiting for tool buttons to be present"); info("Waiting for tool buttons to be present");
await BrowserTestUtils.waitForMutationCondition( await BrowserTestUtils.waitForMutationCondition(
@@ -87,7 +87,38 @@ add_task(async function test_keyboard_navigation() {
info("Press Tab key."); info("Press Tab key.");
EventUtils.synthesizeKey("KEY_Tab", {}, win); EventUtils.synthesizeKey("KEY_Tab", {}, win);
ok(isActiveElement(customizeButton), "Customize button is focused."); ok(isActiveElement(customizeButton), "Customize button is focused.");
}).skip(); // Bug 1950504 info("Press Enter key again.");
const promiseFocused = BrowserTestUtils.waitForEvent(win, "SidebarFocused");
EventUtils.synthesizeKey("KEY_Enter", {}, win);
await promiseFocused;
await sidebar.updateComplete;
ok(sidebar.open, "Sidebar is open.");
let customizeDocument = SidebarController.browser.contentDocument;
const customizeComponent =
customizeDocument.querySelector("sidebar-customize");
const sidebarPanelHeader = customizeComponent.shadowRoot.querySelector(
"sidebar-panel-header"
);
let closeButton = sidebarPanelHeader.closeButton;
info("Press Tab key.");
EventUtils.synthesizeKey("KEY_Tab", {}, win);
ok(isActiveElement(closeButton), "Close button is focused.");
info("Press Tab key.");
EventUtils.synthesizeKey("KEY_Tab", {}, win);
ok(
isActiveElement(customizeComponent.verticalTabsInput),
"First customize component is focused"
);
info("Press Tab and Shift key.");
EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }, win);
ok(isActiveElement(closeButton), "Close button is focused.");
EventUtils.synthesizeKey("KEY_Enter", {}, win);
await sidebar.updateComplete;
ok(!sidebar.open, "Sidebar is closed.");
});
add_task(async function test_menu_items_labeled() { add_task(async function test_menu_items_labeled() {
const { document, SidebarController } = win; const { document, SidebarController } = win;