Backed out changeset a8042638bf0a (bug 1779625) for causing failure a…

…t browser_aboutwelcome_multistage_primary.js. CLOSED TREE
dothq · Jul 26, 2022 · 2340162 · 2340162
1 parent 0fd24d4
commit 2340162
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 43 deletions.
diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
@@ -367,8 +367,7 @@ const StepsIndicator = props => {
     let className = `${i === props.order ? "current" : ""} ${i < props.order ? "complete" : ""}`;
     steps.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       key: i,
-      className: `indicator ${className}`,
-      role: "presentation"
+      className: `indicator ${className}`
     }));
   }
 
@@ -817,18 +816,14 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
     })), content.secondary_button ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_5__.SecondaryCTA, {
       content: content,
       handleAction: this.props.handleAction
-    }) : null)), hideStepsIndicator ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    }) : null)), hideStepsIndicator ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("nav", {
       className: `steps ${content.progress_bar ? "progress-bar" : ""}`,
-      "data-l10n-id": "onboarding-welcome-steps-indicator2",
+      "data-l10n-id": "onboarding-welcome-steps-indicator",
       "data-l10n-args": JSON.stringify({
         current: this.props.order,
         total
-      }),
-      role: "meter",
-      "aria-valuenow": this.props.order,
-      "aria-valuemin": 1,
-      "aria-valuemax": total
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_5__.StepsIndicator, {
+      })
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("br", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_MultiStageAboutWelcome__WEBPACK_IMPORTED_MODULE_5__.StepsIndicator, {
       order: this.props.stepOrder,
       totalNumberOfScreens: total
     })))));

diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
@@ -950,7 +950,6 @@ body[lwt-newtab-brighttext] {
   padding-block: 16px 0;
   transition: var(--transition);
   z-index: -1;
-  height: 48px;
 }
 .onboardingContainer .steps.has-helptext {
   padding-bottom: 0;

diff --git a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
@@ -1161,7 +1161,6 @@ body {
     padding-block: 16px 0;
     transition: var(--transition);
     z-index: -1;
-    height: 48px;
 
     &.has-helptext {
       padding-bottom: 0;

diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
@@ -240,9 +240,7 @@ export const StepsIndicator = props => {
     let className = `${i === props.order ? "current" : ""} ${
       i < props.order ? "complete" : ""
     }`;
-    steps.push(
-      <div key={i} className={`indicator ${className}`} role="presentation" />
-    );
+    steps.push(<div key={i} className={`indicator ${className}`} />);
   }
   return steps;
 };

diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx
@@ -268,25 +268,24 @@ export class ProtonScreen extends React.PureComponent {
               </div>
             </div>
             {hideStepsIndicator ? null : (
-              <div
+              <nav
                 className={`steps ${
                   content.progress_bar ? "progress-bar" : ""
                 }`}
-                data-l10n-id={"onboarding-welcome-steps-indicator2"}
+                data-l10n-id={"onboarding-welcome-steps-indicator"}
                 data-l10n-args={JSON.stringify({
                   current: this.props.order,
                   total,
                 })}
-                role="meter"
-                aria-valuenow={this.props.order}
-                aria-valuemin={1}
-                aria-valuemax={total}
               >
+                {/* These empty elements are here to help trigger the nav for screen readers. */}
+                <br />
+                <p />
                 <StepsIndicator
                   order={this.props.stepOrder}
                   totalNumberOfScreens={total}
                 />
-              </div>
+              </nav>
             )}
           </div>
         </div>

diff --git a/browser/components/newtab/test/browser/browser_aboutwelcome_multistage_default.js b/browser/components/newtab/test/browser/browser_aboutwelcome_multistage_default.js
@@ -157,7 +157,7 @@ add_task(async function test_multistage_aboutwelcome_proton() {
   // Ensure step indicator is not displayed
   await test_element_styles(
     browser,
-    "div.steps",
+    "nav.steps",
     // Expected styles:
     {
       display: "none",
@@ -191,7 +191,7 @@ add_task(async function test_multistage_aboutwelcome_proton() {
       "div.onboardingContainer",
       "div.proton[style*='chrome://activity-stream/content/data/content/assets']",
       "div.section-main",
-      "div.steps",
+      "nav.steps",
       "div.indicator.current",
     ],
     // Unexpected selectors:
@@ -218,7 +218,7 @@ add_task(async function test_multistage_aboutwelcome_proton() {
       "div.proton[style*='chrome://activity-stream/content/data/content/assets']",
       "div.section-main",
       "div.tiles-theme-container",
-      "div.steps",
+      "nav.steps",
       "div.indicator.current",
     ],
     // Unexpected selectors:
@@ -247,7 +247,7 @@ add_task(async function test_multistage_aboutwelcome_proton() {
       "main.AW_STEP2",
       "main.AW_STEP1",
       "main.AW_STEP3",
-      "div.steps",
+      "nav.steps",
       "main.dialog-initial",
       "main.AW_STEP4.screen-0",
       "main.AW_STEP4.screen-2",

diff --git a/browser/components/newtab/test/unit/aboutwelcome/MultiStageAboutWelcome.test.jsx b/browser/components/newtab/test/unit/aboutwelcome/MultiStageAboutWelcome.test.jsx
@@ -200,20 +200,6 @@ describe("MultiStageAboutWelcome module", () => {
         assert.ok(wrapper.find("div.indicator"));
       });
 
-      it("should assign the total number of screens and current screen to the aria-valuemax and aria-valuenow labels", () => {
-        const SCREEN_PROPS = {
-          totalNumberOfScreens: 3,
-          currentScreen: 1,
-        };
-        <StepsIndicator {...SCREEN_PROPS} />;
-        const wrapper = mount(<StepsIndicator {...SCREEN_PROPS} />);
-        assert.ok(
-          wrapper.find(
-            `div.steps[aria-valuemax=${SCREEN_PROPS.totalNumberOfScreens}][aria-valuenow=${SCREEN_PROPS.currentScreen}][aria-valuemin="1"]`
-          )
-        );
-      });
-
       it("should have a primary, secondary and secondary.top button in the rendered input", () => {
         const wrapper = mount(<WelcomeScreen {...GET_STARTED_SCREEN_PROPS} />);
         assert.ok(wrapper.find(".primary"));

diff --git a/browser/locales/en-US/browser/newtab/onboarding.ftl b/browser/locales/en-US/browser/newtab/onboarding.ftl
@@ -29,9 +29,8 @@ return-to-amo-add-theme-label = Add the Theme
 # Variables:
 #   $current (Int) - Number of the current page
 #   $total (Int) - Total number of pages
-
-onboarding-welcome-steps-indicator2 =
-  .aria-valuetext = Progress: step { $current } of { $total }
+onboarding-welcome-steps-indicator =
+  .aria-label = Getting started: screen { $current } of { $total }
 
 # "Hero Text" displayed on left side of welcome screen.
 # The "Fire" in "Fire starts here" plays on the "Fire" in "Firefox".