Bug 1392469 - [Onboarding] remove fox icon and speech bubble from notification;r=fischer
MozReview-Commit-ID: BeaOswqNf4G
--- a/browser/extensions/onboarding/content/onboarding.css
+++ b/browser/extensions/onboarding/content/onboarding.css
@@ -42,27 +42,23 @@
transition: outline-offset 150ms;
}
#onboarding-overlay-button-icon {
width: 36px;
vertical-align: top;
}
-#onboarding-notification-icon::after,
#onboarding-overlay-button::after {
background: #5ce6e6;
font-size: 12px;
border: 1px solid #fff;
text-align: center;
color: #10404a;
box-sizing: content-box;
-}
-
-#onboarding-overlay-button::after {
content: attr(aria-label);
display: inline-block;
offset-inline-start: 39px;
border-radius: 22px;
padding: 5px 12px;
min-width: 100px;
max-width: 140px;
white-space: pre-line;
@@ -477,43 +473,16 @@
transform: translateY(122px);
}
#onboarding-notification-bar.onboarding-opened {
transition: none;
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%;
offset-inline-end: 34px;
transform: translateY(-50%);
}
#onboarding-notification-message-section {
@@ -559,18 +528,13 @@
border: 1px solid transparent;
border-radius: 0;
padding: 10px 20px;
font-size: 14px;
color: #fff;
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;
}
}
--- a/browser/extensions/onboarding/content/onboarding.js
+++ b/browser/extensions/onboarding/content/onboarding.js
@@ -907,39 +907,30 @@ class Onboarding {
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")
+ 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">
<h1 id="onboarding-notification-tour-title"></h1>
<p id="onboarding-notification-tour-message"></p>
</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);
-
- 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",
this._bundle.GetStringFromName("onboarding.notification-close-button-tooltip"));
return footer;
}
hide() {
--- a/browser/extensions/onboarding/locales/en-US/onboarding.properties
+++ b/browser/extensions/onboarding/locales/en-US/onboarding.properties
@@ -1,18 +1,16 @@
# 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-title2): This string will be used in the overlay title.
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
# do appropriate line breaking.
onboarding.overlay-icon-tooltip2=New to %S?\nLet’s get started.
# LOCALIZATION NOTE(onboarding.overlay-icon-tooltip-updated2): %S is
# brandShortName. The tooltip is designed to show in two lines. Please use \n to
# do appropriate line breaking.
--- a/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js
+++ b/browser/extensions/onboarding/test/browser/browser_onboarding_accessibility.js
@@ -37,27 +37,24 @@ add_task(async function test_onboarding_
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-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"
].forEach(id =>
is(doc.getElementById(id).getAttribute("role"), "presentation",
"Element is only used for presentation"));
});