Bug 1790487 - Change Colorways tooltip and aria-label r=aminomancer,fluent-reviewers
authorEmily McMinn <emcminn@mozilla.com>
Tue, 20 Sep 2022 15:12:18 +0000
changeset 635907 1d5f095c02d2366a8e591c26fee1d305f1f078a4
parent 635906 0507e139a558fd8721c57234481941dd05e3028a
child 635908 ea40a2dfd016ce3b2af27e2b1e74f8f8ef72b79f
push id170057
push useremcminn@mozilla.com
push dateTue, 20 Sep 2022 15:29:45 +0000
treeherderautoland@1d5f095c02d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaminomancer, fluent-reviewers
bugs1790487
milestone107.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1790487 - Change Colorways tooltip and aria-label r=aminomancer,fluent-reviewers I'll wait to land this until next week, so that we're not putting in new strings right at the end of Nightly. I've tested this with MacOS VoiceOver & NVDA on windows and the behaviour is pretty good. VoiceOver will repeat the colorway group & name a few times which is annoying, but it's an existing problem we haven't found a tidy solution for yet. Differential Revision: https://phabricator.services.mozilla.com/D157369
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm
browser/components/newtab/content-src/aboutwelcome/components/MRColorways.jsx
browser/components/newtab/lib/OnboardingMessageProvider.jsm
browser/locales/en-US/browser/newtab/onboarding.ftl
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
+++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
@@ -1072,22 +1072,22 @@ function Colorways(props) {
     text: typeof tooltip === "object" ? tooltip : {}
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     className: "theme",
     title: label,
     "data-l10n-args": JSON.stringify({
       colorwayName: label
     })
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
-    text: typeof label === "object" ? label : {}
+    text: typeof tooltip === "object" ? tooltip : {}
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
     className: "sr-only colorway label",
     id: `${id}-label`,
     "data-l10n-args": JSON.stringify({
-      colorwayName: label
+      colorwayName: tooltip
     })
   })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__.Localized, {
     text: typeof label === "object" ? label : {}
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
     type: "radio",
     "data-colorway": id,
     name: "theme",
     value: id === "default" ? systemVariations[variationIndex] : `${id}-${variations[variationIndex]}`,
--- a/browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm
+++ b/browser/components/newtab/aboutwelcome/lib/AboutWelcomeDefaults.jsm
@@ -470,78 +470,78 @@ const MR_ABOUT_WELCOME_DEFAULT = {
               },
             },
             {
               id: "playmaker",
               label: {
                 string_id: "mr2022-onboarding-colorway-label-playmaker",
               },
               tooltip: {
-                string_id: "mr2022-onboarding-colorway-tooltip-playmaker",
+                string_id: "mr2022-onboarding-colorway-tooltip-playmaker2",
               },
               description: {
                 string_id: "mr2022-onboarding-colorway-description-playmaker",
               },
             },
             {
               id: "expressionist",
               label: {
                 string_id: "mr2022-onboarding-colorway-label-expressionist",
               },
               tooltip: {
-                string_id: "mr2022-onboarding-colorway-tooltip-expressionist",
+                string_id: "mr2022-onboarding-colorway-tooltip-expressionist2",
               },
               description: {
                 string_id:
                   "mr2022-onboarding-colorway-description-expressionist",
               },
             },
             {
               id: "visionary",
               label: {
                 string_id: "mr2022-onboarding-colorway-label-visionary",
               },
               tooltip: {
-                string_id: "mr2022-onboarding-colorway-tooltip-visionary",
+                string_id: "mr2022-onboarding-colorway-tooltip-visionary2",
               },
               description: {
                 string_id: "mr2022-onboarding-colorway-description-visionary",
               },
             },
             {
               id: "activist",
               label: {
                 string_id: "mr2022-onboarding-colorway-label-activist",
               },
               tooltip: {
-                string_id: "mr2022-onboarding-colorway-tooltip-activist",
+                string_id: "mr2022-onboarding-colorway-tooltip-activist2",
               },
               description: {
                 string_id: "mr2022-onboarding-colorway-description-activist",
               },
             },
             {
               id: "dreamer",
               label: {
                 string_id: "mr2022-onboarding-colorway-label-dreamer",
               },
               tooltip: {
-                string_id: "mr2022-onboarding-colorway-tooltip-dreamer",
+                string_id: "mr2022-onboarding-colorway-tooltip-dreamer2",
               },
               description: {
                 string_id: "mr2022-onboarding-colorway-description-dreamer",
               },
             },
             {
               id: "innovator",
               label: {
                 string_id: "mr2022-onboarding-colorway-label-innovator",
               },
               tooltip: {
-                string_id: "mr2022-onboarding-colorway-tooltip-innovator",
+                string_id: "mr2022-onboarding-colorway-tooltip-innovator2",
               },
               description: {
                 string_id: "mr2022-onboarding-colorway-description-innovator",
               },
             },
           ],
         },
         primary_button: {
--- a/browser/components/newtab/content-src/aboutwelcome/components/MRColorways.jsx
+++ b/browser/components/newtab/content-src/aboutwelcome/components/MRColorways.jsx
@@ -147,22 +147,22 @@ export function Colorways(props) {
             >
               <label
                 className="theme"
                 title={label}
                 data-l10n-args={JSON.stringify({
                   colorwayName: label,
                 })}
               >
-                <Localized text={typeof label === "object" ? label : {}}>
+                <Localized text={typeof tooltip === "object" ? tooltip : {}}>
                   <span
                     className="sr-only colorway label"
                     id={`${id}-label`}
                     data-l10n-args={JSON.stringify({
-                      colorwayName: label,
+                      colorwayName: tooltip,
                     })}
                   />
                 </Localized>
                 <Localized text={typeof label === "object" ? label : {}}>
                   <input
                     type="radio"
                     data-colorway={id}
                     name="theme"
--- a/browser/components/newtab/lib/OnboardingMessageProvider.jsm
+++ b/browser/components/newtab/lib/OnboardingMessageProvider.jsm
@@ -256,82 +256,82 @@ const BASE_MESSAGES = () => [
                   },
                 },
                 {
                   id: "playmaker",
                   label: {
                     string_id: "mr2022-onboarding-colorway-label-playmaker",
                   },
                   tooltip: {
-                    string_id: "mr2022-onboarding-colorway-tooltip-playmaker",
+                    string_id: "mr2022-onboarding-colorway-tooltip-playmaker2",
                   },
                   description: {
                     string_id:
                       "mr2022-onboarding-colorway-description-playmaker",
                   },
                 },
                 {
                   id: "expressionist",
                   label: {
                     string_id: "mr2022-onboarding-colorway-label-expressionist",
                   },
                   tooltip: {
                     string_id:
-                      "mr2022-onboarding-colorway-tooltip-expressionist",
+                      "mr2022-onboarding-colorway-tooltip-expressionist2",
                   },
                   description: {
                     string_id:
                       "mr2022-onboarding-colorway-description-expressionist",
                   },
                 },
                 {
                   id: "visionary",
                   label: {
                     string_id: "mr2022-onboarding-colorway-label-visionary",
                   },
                   tooltip: {
-                    string_id: "mr2022-onboarding-colorway-tooltip-visionary",
+                    string_id: "mr2022-onboarding-colorway-tooltip-visionary2",
                   },
                   description: {
                     string_id:
                       "mr2022-onboarding-colorway-description-visionary",
                   },
                 },
                 {
                   id: "activist",
                   label: {
                     string_id: "mr2022-onboarding-colorway-label-activist",
                   },
                   tooltip: {
-                    string_id: "mr2022-onboarding-colorway-tooltip-activist",
+                    string_id: "mr2022-onboarding-colorway-tooltip-activist2",
                   },
                   description: {
                     string_id:
                       "mr2022-onboarding-colorway-description-activist",
                   },
                 },
                 {
                   id: "dreamer",
                   label: {
                     string_id: "mr2022-onboarding-colorway-label-dreamer",
                   },
                   tooltip: {
-                    string_id: "mr2022-onboarding-colorway-tooltip-dreamer",
+                    string_id: "mr2022-onboarding-colorway-tooltip-dreamer2",
                   },
                   description: {
                     string_id: "mr2022-onboarding-colorway-description-dreamer",
                   },
                 },
                 {
                   id: "innovator",
                   label: {
                     string_id: "mr2022-onboarding-colorway-label-innovator",
                   },
                   tooltip: {
-                    string_id: "mr2022-onboarding-colorway-tooltip-innovator",
+                    string_id: "mr2022-onboarding-colorway-tooltip-innovator2",
                   },
                   description: {
                     string_id:
                       "mr2022-onboarding-colorway-description-innovator",
                   },
                 },
               ],
             },
--- a/browser/locales/en-US/browser/newtab/onboarding.ftl
+++ b/browser/locales/en-US/browser/newtab/onboarding.ftl
@@ -345,43 +345,43 @@ mr2022-onboarding-colorway-primary-butto
 mr2022-onboarding-existing-colorway-checkbox-label = Make { -firefox-home-brand-name } your colorful homepage
 
 mr2022-onboarding-colorway-label-default = Default
 mr2022-onboarding-colorway-tooltip-default =
   .title = Default
 mr2022-onboarding-colorway-description-default = <b>Use my current { -brand-short-name } colors.</b>
 
 mr2022-onboarding-colorway-label-playmaker = Playmaker
-mr2022-onboarding-colorway-tooltip-playmaker =
-  .title = Playmaker
+mr2022-onboarding-colorway-tooltip-playmaker2 =
+  .title = Playmaker (red)
 mr2022-onboarding-colorway-description-playmaker = <b>You are a Playmaker.</b> You create opportunities to win and help everyone around you elevate their game.
 
 mr2022-onboarding-colorway-label-expressionist = Expressionist
-mr2022-onboarding-colorway-tooltip-expressionist =
-  .title = Expressionist
+mr2022-onboarding-colorway-tooltip-expressionist2 =
+  .title = Expressionist (yellow)
 mr2022-onboarding-colorway-description-expressionist = <b>You are an Expressionist.</b> You see the world differently and your creations stir the emotions of others.
 
 mr2022-onboarding-colorway-label-visionary = Visionary
-mr2022-onboarding-colorway-tooltip-visionary =
-  .title = Visionary
+mr2022-onboarding-colorway-tooltip-visionary2 =
+  .title = Visionary (green)
 mr2022-onboarding-colorway-description-visionary = <b>You are a Visionary.</b> You question the status quo and move others to imagine a better future.
 
 mr2022-onboarding-colorway-label-activist = Activist
-mr2022-onboarding-colorway-tooltip-activist =
-  .title = Activist
+mr2022-onboarding-colorway-tooltip-activist2 =
+  .title = Activist (blue)
 mr2022-onboarding-colorway-description-activist = <b>You are an Activist.</b> You leave the world a better place than you found it and lead others to believe.
 
 mr2022-onboarding-colorway-label-dreamer = Dreamer
-mr2022-onboarding-colorway-tooltip-dreamer =
-  .title = Dreamer
+mr2022-onboarding-colorway-tooltip-dreamer2 =
+  .title = Dreamer (purple)
 mr2022-onboarding-colorway-description-dreamer = <b>You are a Dreamer.</b> You believe that fortune favors the bold and inspire others to be brave.
 
 mr2022-onboarding-colorway-label-innovator = Innovator
-mr2022-onboarding-colorway-tooltip-innovator =
-  .title = Innovator
+mr2022-onboarding-colorway-tooltip-innovator2 =
+  .title = Innovator (orange)
 mr2022-onboarding-colorway-description-innovator = <b>You are an Innovator.</b> You see opportunities everywhere and make an impact on the lives of everyone around you.
 
 ## MR2022 Multistage Mobile Download screen strings
 
 mr2022-onboarding-mobile-download-title = Hop from laptop to phone and back again
 mr2022-onboarding-mobile-download-subtitle = Grab tabs from one device and pick up where you left off on another. Plus sync your bookmarks and passwords anywhere you use { -brand-product-name }.
 mr2022-onboarding-mobile-download-cta-text = Scan the QR code to get { -brand-product-name } for mobile or <a data-l10n-name="download-label">send yourself a download link.</a>
 mr2022-onboarding-no-mobile-download-cta-text = Scan the QR code to get { -brand-product-name } for mobile.