Bug 1377273 - [a11y] Make onboarding icon accessible;r=yzen,mossop
MozReview-Commit-ID: EoVjPcVgSci
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -45,17 +45,17 @@
font-size: 12px;
border: 1px solid #fff;
text-align: center;
color: #10404a;
box-sizing: content-box;
}
#onboarding-overlay-button::after {
- content: attr(aria-label);
+ content: attr(tooltip);
display: inline-block;
offset-inline-start: 39px;
border-radius: 22px;
padding: 5px 8px;
width: 110px;
margin-inline-start: 3px;
margin-top: -5px;
}
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -362,17 +362,18 @@ class Onboarding {
return;
}
this.uiInitialized = true;
this._tourItems = [];
this._tourPages = [];
this._overlayIcon = this._renderOverlayButton();
this._overlayIcon.addEventListener("click", this);
- this._window.document.body.appendChild(this._overlayIcon);
+ this._window.document.body.insertBefore(this._overlayIcon,
+ this._window.document.body.firstChild);
this._overlay = this._renderOverlay();
this._overlay.addEventListener("click", this);
this._window.document.body.appendChild(this._overlay);
this._loadJS(TOUR_AGENT_JS_URI);
this._initPrefObserver();
@@ -790,21 +791,23 @@ class Onboarding {
return div;
}
_renderOverlayButton() {
let button = this._window.document.createElement("button");
let tooltipStringId = this._tourType === "new" ?
"onboarding.overlay-icon-tooltip" : "onboarding.overlay-icon-tooltip-updated";
let tooltip = this._bundle.formatStringFromName(tooltipStringId, [BRAND_SHORT_NAME], 1);
- button.setAttribute("aria-label", tooltip);
button.id = "onboarding-overlay-button";
+ button.setAttribute("tooltip", tooltip);
+ button.setAttribute("aria-haspopup", true);
let img = this._window.document.createElement("img");
img.id = "onboarding-overlay-button-icon";
img.src = "resource://onboarding/img/overlay-icon.svg";
+ img.alt = tooltip;
button.appendChild(img);
return button;
}
_loadTours(tours) {
let itemsFrag = this._window.document.createDocumentFragment();
let pagesFrag = this._window.document.createDocumentFragment();
for (let tour of tours) {