Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-11 12:25:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1377273 - added focus styling for onboarding overlay button. r=mossop, gasolin

Browse Source 
MozReview-Commit-ID: BZgx4ODL2at
This commit is contained in:
Yura Zenevich 2017-07-28 14:27:43 -04:00
parent f6d589af0d
commit 0d362b188c
4 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
browser/extensions/onboarding/content/onboarding.css
View File

@ -34,6 +34,14 @@
background: none;
}
/* Keyboard focus styling */
#onboarding-overlay-button:-moz-focusring {
outline: solid 2px rgba(0, 0, 0, 0.1);
-moz-outline-radius: 5px;
outline-offset: 5px;
transition: outline-offset 150ms;
}
#onboarding-overlay-button-icon {
width: 36px;
vertical-align: top;
@ -311,7 +319,8 @@
}
/* Remove default dotted outline around buttons' text */
.onboarding-tour-action-button::-moz-focus-inner {
.onboarding-tour-action-button::-moz-focus-inner,
#onboarding-overlay-button::-moz-focus-inner {
border: 0;
}

8
browser/extensions/onboarding/content/onboarding.js
View File

@ -394,13 +394,14 @@ class Onboarding {
this._tourItems = [];
this._tourPages = [];
let { body } = this._window.document;
this._overlayIcon = this._renderOverlayButton();
this._overlayIcon.addEventListener("click", this);
this._window.document.body.appendChild(this._overlayIcon);
body.insertBefore(this._overlayIcon, body.firstChild);
this._overlay = this._renderOverlay();
this._overlay.addEventListener("click", this);
this._window.document.body.appendChild(this._overlay);
body.appendChild(this._overlay);
this._loadJS(TOUR_AGENT_JS_URI);
@ -827,8 +828,11 @@ class Onboarding {
let tooltip = this._bundle.formatStringFromName(tooltipStringId, [BRAND_SHORT_NAME], 1);
button.setAttribute("aria-label", tooltip);
button.id = "onboarding-overlay-button";
button.setAttribute("aria-haspopup", true);
button.setAttribute("aria-controls", "onboarding-overlay-dialog");
let img = this._window.document.createElement("img");
img.id = "onboarding-overlay-button-icon";
img.setAttribute("role", "presentation");
img.src = "resource://onboarding/img/overlay-icon.svg";
button.appendChild(img);
return button;

1
browser/extensions/onboarding/test/browser/browser.ini
View File

@ -2,6 +2,7 @@
support-files =
head.js
[browser_onboarding_accessibility.js]
[browser_onboarding_notification.js]
[browser_onboarding_notification_2.js]
[browser_onboarding_notification_3.js]

31
browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js Normal file
View File

@ -0,0 +1,31 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
add_task(async function test_onboarding_overlay_button() {
resetOnboardingDefaultState();
info("Wait for onboarding overlay loaded");
let tab = await openTab(ABOUT_HOME_URL);
await promiseOnboardingOverlayLoaded(tab.linkedBrowser);
info("Test accessibility and semantics of the overlay button");
await ContentTask.spawn(tab.linkedBrowser, {}, function() {
let doc = content.document;
let button = doc.body.firstChild;
is(button.id, "onboarding-overlay-button",
"First child is an overlay button");
ok(button.getAttribute("aria-label"),
"Onboarding button has an accessible label");
is(button.getAttribute("aria-haspopup"), "true",
"Onboarding button should indicate that it triggers a popup");
is(button.getAttribute("aria-controls"), "onboarding-overlay-dialog",
"Onboarding button semantically controls an overlay dialog");
is(button.firstChild.getAttribute("role"), "presentation",
"Onboarding button icon should have presentation only semantics");
});
await BrowserTestUtils.removeTab(tab);
});