Bug 1377273 - [a11y] Make onboarding icon accessible;r=yzen,mossop draft
authorgasolin <gasolin@gmail.com>
Thu, 27 Jul 2017 14:53:35 +0800
changeset 616623 d7245c3c20330a0ff07d84b486bf91952ac44cd8
parent 616205 f1693d664f8e8ee4c79801630c181c28095cad56
child 639532 05c6ece7d26d561df6a53799b6d32db537decd7f
push id70747
push userbmo:gasolin@mozilla.com
push dateThu, 27 Jul 2017 07:56:41 +0000
reviewersyzen, mossop
bugs1377273
milestone56.0a1
Bug 1377273 - [a11y] Make onboarding icon accessible;r=yzen,mossop MozReview-Commit-ID: EoVjPcVgSci
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
--- 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) {