Bug 1377273 - [a11y] Make onboarding icon accessible;r=yzen,mossop draft
authorgasolin <gasolin@gmail.com>
Thu, 13 Jul 2017 17:36:39 +0800
changeset 609602 579b16f27c64da2693f66a30a88e0969baaf5e5f
parent 609596 aff336ac161daa3ea350e59a288963edbd58ed39
child 637588 9fd957ff73d8551891570a428582f45076897e89
push id68597
push userbmo:gasolin@mozilla.com
push dateMon, 17 Jul 2017 03:01:10 +0000
reviewersyzen, mossop
bugs1377273
milestone56.0a1
Bug 1377273 - [a11y] Make onboarding icon accessible;r=yzen,mossop MozReview-Commit-ID: FVqnKmG1A4I
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/locales/en-US/onboarding.properties
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -19,23 +19,29 @@
   display: none;
 }
 
 #onboarding-overlay.onboarding-opened {
   display: block;
 }
 
 #onboarding-overlay-icon {
-  width: 36px;
-  height: 29px;
   position: absolute;
   cursor: pointer;
   top: 30px;
   offset-inline-start: 30px;
-  background: url("img/overlay-icon.svg") no-repeat;
+  padding: 0;
+  border: 0;
+  background-color: inherit;
+  z-index: 20998;
+}
+
+#onboarding-overlay-icon > img {
+  width: 36px;
+  height: 29px;
 }
 
 #onboarding-overlay-dialog {
   display: none;
 }
 
 #onboarding-overlay-close-btn,
 #onboarding-notification-close-btn {
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -278,17 +278,18 @@ class Onboarding {
   _initUI() {
     if (this.uiInitialized) {
       return;
     }
     this.uiInitialized = true;
 
     this._overlayIcon = this._renderOverlayIcon();
     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();
@@ -690,19 +691,26 @@ class Onboarding {
     div.querySelector("label[for='onboarding-tour-hidden-checkbox']").textContent =
        this._bundle.GetStringFromName("onboarding.hidden-checkbox-label-text");
     div.querySelector("#onboarding-header").textContent =
        this._bundle.formatStringFromName("onboarding.overlay-title", [BRAND_SHORT_NAME], 1);
     return div;
   }
 
   _renderOverlayIcon() {
-    let img = this._window.document.createElement("div");
-    img.id = "onboarding-overlay-icon";
-    return img;
+    let icon = this._window.document.createElement("button");
+    icon.id = "onboarding-overlay-icon";
+    let tooltip = this._bundle.formatStringFromName("onboarding.overlay-icon-tool-tip", [BRAND_SHORT_NAME], 1);
+    icon.setAttribute("aria-haspopup", true);
+    icon.setAttribute("aria-label", tooltip);
+    let img = this._window.document.createElement("img");
+    img.src = "resource://onboarding/img/overlay-icon.svg";
+    img.alt = tooltip;
+    icon.appendChild(img);
+    return icon;
   }
 
   _loadTours(tours) {
     let itemsFrag = this._window.document.createDocumentFragment();
     let pagesFrag = this._window.document.createDocumentFragment();
     for (let tour of tours) {
       // Create tour navigation items dynamically
       let li = this._window.document.createElement("li");
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -1,16 +1,18 @@
 # 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/.
 # LOCALIZATION NOTE(onboarding.overlay-title): This string will be used in the overlay title. %S is brandShortName
 onboarding.overlay-title=Getting started with %S
 onboarding.hidden-checkbox-label-text=Mark all as complete, and hide the tour
 #LOCALIZATION NOTE(onboarding.button.learnMore): this string is used as a button label, displayed near the message, and shared across all the onboarding notifications.
 onboarding.button.learnMore=Learn More
+# LOCALIZATION NOTE(onboarding.overlay-icon-tool-tip): This string will be used to show the tooltip alongside the notification icon. %S is brandShortName.
+onboarding.overlay-icon-tool-tip=New to %S? Let’s get started.
 # LOCALIZATION NOTE(onboarding.notification-icon-tool-tip): This string will be used to show the tooltip alongside the notification icon. %S is brandShortName.
 onboarding.notification-icon-tool-tip=New to %S?
 
 onboarding.tour-search2=Search
 onboarding.tour-search.title2=Find it faster.
 # LOCALIZATION NOTE (onboarding.tour-search.description2): If Amazon is not part
 # of the default searchplugins for your locale, you can replace it with another
 # ecommerce website (if you're shipping one), but not with a general purpose