diff --git a/browser/extensions/onboarding/content/onboarding.css b/browser/extensions/onboarding/content/onboarding.css index f6c59f675e5f..3f2d01a28fc6 100644 --- a/browser/extensions/onboarding/content/onboarding.css +++ b/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; diff --git a/browser/extensions/onboarding/content/onboarding.js b/browser/extensions/onboarding/content/onboarding.js index 00381e0341a6..3f9465a49396 100644 --- a/browser/extensions/onboarding/content/onboarding.js +++ b/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 = ` - `; - 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", diff --git a/browser/extensions/onboarding/locales/en-US/onboarding.properties b/browser/extensions/onboarding/locales/en-US/onboarding.properties index b9dc8f72c758..d1322dd1e65f 100644 --- a/browser/extensions/onboarding/locales/en-US/onboarding.properties +++ b/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 diff --git a/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js b/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js index 8711b0410a5e..8ae5f75ea3e9 100644 --- a/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js +++ b/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"