Bug 1392469 - [Onboarding] remove fox icon and speech bubble from notification;r=Fischer

MozReview-Commit-ID: BeaOswqNf4G

--HG--
extra : rebase_source : c7e5223ce8e4034b47ba96d2ac42b26a11e77293

browser/extensions/onboarding/content/onboarding.css

@@ -47,7 +47,6 @@
   vertical-align: top;
 }
 
-#onboarding-notification-icon::after,
 #onboarding-overlay-button::after {
   background: #5ce6e6;
   font-size: 12px;
@@ -55,9 +54,6 @@
   text-align: center;
   color: #10404a;
   box-sizing: content-box;
-}
-
-#onboarding-overlay-button::after {
   content: attr(aria-label);
   display: inline-block;
   offset-inline-start: 39px;
@@ -482,33 +478,6 @@
   transform: translateY(0px);
 }
 
-#onboarding-notification-icon {
-  height: 36px;
-  background: url("img/overlay-icon.svg") no-repeat;
-  background-size: 36px;
-  background-position: 34px;
-  padding-inline-start: 190px;
-  position: absolute;
-  offset-block-start: 50%;
-  transform: translateY(-50%);
-}
-
-#onboarding-notification-icon:dir(rtl) {
-  background-position: right 34px center;
-}
-
-#onboarding-notification-icon::after {
-  --height: 22px;
-  --vpadding: 3px;
-  position: absolute;
-  content: attr(aria-label);
-  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 {
   position: absolute;
   offset-block-start: 50%;
@@ -564,11 +533,6 @@
   min-width: 130px;
 }
 
-@media all and (max-width: 960px) {
-  #onboarding-notification-icon {
-    display: none;
-  }
-}
 @media all and (max-width: 720px) {
   #onboarding-notification-body {
     width: 340px;

browser/extensions/onboarding/content/onboarding.js

@@ -912,11 +912,10 @@ class Onboarding {
     let footer = this._window.document.createElement("footer");
     footer.id = "onboarding-notification-bar";
     footer.setAttribute("aria-live", "polite");
-    footer.setAttribute("aria-labelledby", "onboarding-notification-icon")
+    footer.setAttribute("aria-labelledby", "onboarding-notification-tour-title")
     // 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">
@@ -927,14 +926,6 @@ class Onboarding {
       </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);
-
-    let icon = footer.querySelector("#onboarding-notification-icon");
-    icon.setAttribute("aria-label", toolTip);
-    icon.setAttribute("role", "presentation");
 
     let closeBtn = footer.querySelector("#onboarding-notification-close-btn");
     closeBtn.setAttribute("title",

browser/extensions/onboarding/locales/en-US/onboarding.properties

@@ -6,8 +6,6 @@ onboarding.overlay-title2=Let’s get started
 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.notification-icon-tool-tip): This string will be used to show the tooltip alongside the notification icon in the notification bar. %S is brandShortName.
-onboarding.notification-icon-tool-tip=New to %S?
 # LOCALIZATION NOTE(onboarding.overlay-icon-tooltip2): This string will be used
 # to show the tooltip alongside the notification icon in the overlay tour. %S is
 # brandShortName. The tooltip is designed to show in two lines. Please use \n to

browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js

@@ -42,17 +42,14 @@ add_task(async function test_onboarding_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-labelledby"), doc.getElementById("onboarding-notification-tour-title").id,
+      "Notification bar should be labelled by the notification tour title text");
 
     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"