Backed out changeset ccdd5c4ad925 (bug 1387057) for browser_onboarding_tours.js failures.
authorRyan VanderMeulen <ryanvm@gmail.com>
Mon, 21 Aug 2017 23:19:51 -0400
changeset 423702 d6bca1edd1bc8789309225e062ef6a1519035548
parent 423701 21bc77a750df162c8336864e8fff060f1f179616
child 423703 c8da3a874d4ad8245711e7c618bb0d5a561f86d8
push id1517
push userjlorenzo@mozilla.com
push dateThu, 14 Sep 2017 16:50:54 +0000
treeherdermozilla-release@3b41fd564418 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1387057
milestone56.0
backs outccdd5c4ad925466c442a62d0ca4c3d2baf9bde29
Backed out changeset ccdd5c4ad925 (bug 1387057) for browser_onboarding_tours.js failures.
browser/extensions/onboarding/content/onboarding.css
browser/extensions/onboarding/content/onboarding.js
browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -320,18 +320,17 @@
 
 /* Remove default dotted outline around buttons' text */
 .onboarding-tour-action-button::-moz-focus-inner,
 #onboarding-overlay-button::-moz-focus-inner {
   border: 0;
 }
 
 /* Keyboard focus specific outline */
-.onboarding-tour-action-button:-moz-focusring,
-#onboarding-notification-action-btn:-moz-focusring {
+.onboarding-tour-action-button:-moz-focusring {
   outline: 2px solid rgba(0,149,221,0.5);
   outline-offset: 1px;
   -moz-outline-radius: 2px;
 }
 
 .onboarding-tour-action-button:hover:not([disabled]) ,
 #onboarding-notification-action-btn:hover {
   background: #0060df;
@@ -491,17 +490,17 @@
 #onboarding-notification-icon:dir(rtl) {
   background-position: right 34px center;
 }
 
 #onboarding-notification-icon::after {
   --height: 22px;
   --vpadding: 3px;
   position: absolute;
-  content: attr(aria-label);
+  content: attr(data-tooltip);
   top: 0;
   offset-inline-start: 73px;
   line-height: calc(var(--height) - var(--vpadding) * 2);
   border-radius: calc(var(--height) / 2);
   padding: var(--vpadding) 10px;
 }
 
 #onboarding-notification-close-btn {
@@ -534,17 +533,16 @@
 }
 
 #onboarding-notification-body * {
   font-size: 13px
 }
 
 #onboarding-notification-tour-title {
   margin: 0;
-  font-weight: bold;
 }
 
 #onboarding-notification-tour-icon {
   min-width: 64px;
   height: 64px;
   background-size: 64px;
   background-repeat: no-repeat;
 }
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -746,47 +746,42 @@ class Onboarding {
 
   hideNotification() {
     if (this._notificationBar) {
       this._notificationBar.classList.remove("onboarding-opened");
     }
   }
 
   _renderNotificationBar() {
-    let footer = this._window.document.createElement("footer");
-    footer.id = "onboarding-notification-bar";
-    footer.setAttribute("aria-live", "polite");
-    footer.setAttribute("aria-labelledby", "onboarding-notification-icon")
+    let div = this._window.document.createElement("div");
+    div.id = "onboarding-notification-bar";
     // We use `innerHTML` for more friendly reading.
     // The security should be fine because this is not from an external input.
-    footer.innerHTML = `
-      <div id="onboarding-notification-icon" role="presentation"></div>
-      <section id="onboarding-notification-message-section" role="presentation">
-        <div id="onboarding-notification-tour-icon" role="presentation"></div>
-        <div id="onboarding-notification-body" role="presentation">
-          <h1 id="onboarding-notification-tour-title"></h1>
-          <p id="onboarding-notification-tour-message"></p>
+    div.innerHTML = `
+      <div id="onboarding-notification-icon"></div>
+      <section id="onboarding-notification-message-section">
+        <div id="onboarding-notification-tour-icon"></div>
+        <div id="onboarding-notification-body">
+          <h6 id="onboarding-notification-tour-title"></h6>
+          <span id="onboarding-notification-tour-message"></span>
         </div>
         <button id="onboarding-notification-action-btn"></button>
       </section>
       <button id="onboarding-notification-close-btn" class="onboarding-close-btn"></button>
     `;
     let toolTip = this._bundle.formatStringFromName(
       this._tourType === "new" ? "onboarding.notification-icon-tool-tip" :
                                  "onboarding.notification-icon-tooltip-updated",
       [BRAND_SHORT_NAME], 1);
+    div.querySelector("#onboarding-notification-icon").setAttribute("data-tooltip", toolTip);
 
-    let icon = footer.querySelector("#onboarding-notification-icon");
-    icon.setAttribute("aria-label", toolTip);
-    icon.setAttribute("role", "presentation");
-
-    let closeBtn = footer.querySelector("#onboarding-notification-close-btn");
+    let closeBtn = div.querySelector("#onboarding-notification-close-btn");
     closeBtn.setAttribute("title",
       this._bundle.GetStringFromName("onboarding.notification-close-button-tooltip"));
-    return footer;
+    return div;
   }
 
   hide() {
     this.setToursCompleted(this._tours.map(tour => tour.id));
     sendMessageToChrome("set-prefs", [
       {
         name: "browser.onboarding.hidden",
         value: true
--- a/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js
+++ b/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js
@@ -24,42 +24,8 @@ add_task(async function test_onboarding_
     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);
 });
-
-add_task(async function test_onboarding_notification_bar() {
-  resetOnboardingDefaultState();
-  skipMuteNotificationOnFirstSession();
-
-  let tab = await openTab(ABOUT_NEWTAB_URL);
-  await promiseOnboardingOverlayLoaded(tab.linkedBrowser);
-  await promiseTourNotificationOpened(tab.linkedBrowser);
-
-  info("Test accessibility and semantics of the notification bar");
-  await ContentTask.spawn(tab.linkedBrowser, {}, function() {
-    let doc = content.document;
-    let footer = doc.getElementById("onboarding-notification-bar");
-    let icon = doc.getElementById("onboarding-notification-icon")
-
-    is(footer.getAttribute("aria-live"), "polite",
-      "Notification bar should be a live region");
-    is(footer.getAttribute("aria-labelledby"), icon.id,
-      "Notification bar should be labelled by the notification icon text");
-    ok(icon.getAttribute("aria-label"),
-      "Notification icon should have a text alternative");
-    // Presentational elements
-    [
-      "onboarding-notification-icon",
-      "onboarding-notification-message-section",
-      "onboarding-notification-tour-icon",
-      "onboarding-notification-body"
-    ].forEach(id =>
-      is(doc.getElementById(id).getAttribute("role"), "presentation",
-        "Element is only used for presentation"));
-  });
-
-  await BrowserTestUtils.removeTab(tab);
-});