Bug 1550137 - Change from aria-hidden to HTML5 hidden. r=MattN

Differential Revision: https://phabricator.services.mozilla.com/D34601

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Jared Wein 2019-06-14 18:20:53 +00:00
parent 5c01e14fcb
commit c97e97c5e9
6 changed files with 14 additions and 18 deletions

View File

@ -141,7 +141,7 @@
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/menu-button.css">
<button class="menu-button alternate-button"></button>
<ul class="menu" role="menu" aria-hidden="true">
<ul class="menu" role="menu" hidden>
<li role="menuitem" class="menuitem windows-only">
<button class="menuitem-button menuitem-import alternate-button" data-event-name="AboutLoginsImport"></button>
</li>

View File

@ -18,10 +18,6 @@
margin-inline-end: 0;
}
.menu[aria-hidden="true"] {
display: none;
}
.menu {
position: absolute;
top: 30px;

View File

@ -74,7 +74,7 @@ export default class MenuButton extends ReflectedFluentElement {
}
toggleMenu() {
let wasHidden = this.shadowRoot.querySelector(".menu").getAttribute("aria-hidden") == "true";
let wasHidden = this.shadowRoot.querySelector(".menu").hidden;
if (wasHidden) {
this.showMenu();
} else {
@ -83,12 +83,12 @@ export default class MenuButton extends ReflectedFluentElement {
}
hideMenu() {
this.shadowRoot.querySelector(".menu").setAttribute("aria-hidden", "true");
this.shadowRoot.querySelector(".menu").hidden = true;
document.documentElement.removeEventListener("click", this, true);
}
showMenu() {
this.shadowRoot.querySelector(".menu").setAttribute("aria-hidden", "false");
this.shadowRoot.querySelector(".menu").hidden = false;
// Add a catch-all event listener to close the menu.
document.documentElement.addEventListener("click", this, true);

View File

@ -16,9 +16,9 @@ add_task(async function test_open_import() {
await ContentTask.spawn(browser, null, async () => {
return ContentTaskUtils.waitForCondition(() => {
let menuButton = Cu.waiveXrays(content.document.querySelector("menu-button"));
return menuButton.shadowRoot
return !menuButton.shadowRoot
.querySelector(".menu")
.getAttribute("aria-hidden") == "false";
.hidden;
}, "waiting for menu to open");
});

View File

@ -16,9 +16,9 @@ add_task(async function test_open_preferences() {
await ContentTask.spawn(browser, null, async () => {
return ContentTaskUtils.waitForCondition(() => {
let menuButton = Cu.waiveXrays(content.document.querySelector("menu-button"));
return menuButton.shadowRoot
return !menuButton.shadowRoot
.querySelector(".menu")
.getAttribute("aria-hidden") == "false";
.hidden;
}, "waiting for menu to open");
});

View File

@ -45,10 +45,10 @@ add_task(async function test_menu_open_close() {
is(document.activeElement, gMenuButton, "menu-button should be focused to start the test");
let menu = gMenuButton.shadowRoot.querySelector(".menu");
is("true", menu.getAttribute("aria-hidden"), "menu should be hidden before pressing 'space'");
is(true, menu.hidden, "menu should be hidden before pressing 'space'");
sendKey("SPACE");
await new Promise(resolve => requestAnimationFrame(resolve));
is("false", menu.getAttribute("aria-hidden"), "menu should be visible after pressing 'space'");
is(false, menu.hidden, "menu should be visible after pressing 'space'");
let preferencesItem = gMenuButton.shadowRoot.querySelector(".menuitem-preferences");
ok(!preferencesItem.matches(":focus"), ".menuitem-preferences should not be focused before tabbing to it");
@ -63,11 +63,11 @@ add_task(async function test_menu_open_close() {
ok(preferencesItem.matches(":focus"), ".menuitem-preferences should be focused after tabbing to it");
let openPreferencesEvent = null;
is("false", menu.getAttribute("aria-hidden"), "menu should be visible before pressing 'space' on .menuitem-preferences");
is(false, menu.hidden, "menu should be visible before pressing 'space' on .menuitem-preferences");
window.addEventListener("AboutLoginsOpenPreferences", event => openPreferencesEvent = event);
sendKey("SPACE");
ok(openPreferencesEvent, "AboutLoginsOpenPreferences event should be dispatched after pressing 'space' on .menuitem-preferences");
is("true", menu.getAttribute("aria-hidden"), "menu should be hidden after pressing 'space' on .menuitem-preferences");
is(true, menu.hidden, "menu should be hidden after pressing 'space' on .menuitem-preferences");
});
</script>