Commit 8bcf4df5 authored by Emily McMinn's avatar Emily McMinn
Browse files

Bug 1736550 - Adjusting focus for screen readers on about:welcome r=Jamie 

Differential Revision: https://phabricator.services.mozilla.com/D131413
parent 5630f0a4

browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js

+8 −5
Original line number Diff line number Diff line
@@ -779,7 +779,13 @@ class MultiStageProtonScreen extends react__WEBPACK_IMPORTED_MODULE_0___default. 
    }



    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("main", {

      className: `screen ${this.props.id} ${screenClassName}`

      className: `screen ${this.props.id} ${screenClassName}`,

      role: "dialog",

      tabIndex: "-1",

      "aria-labelledby": "mainContentHeader",

      ref: input => {

        this.mainContentHeader = input;

      }

    }, isWelcomeScreen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {

      className: "section-left"

    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
@@ -823,10 +829,7 @@ class MultiStageProtonScreen extends react__WEBPACK_IMPORTED_MODULE_0___default. 
    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {

      text: content.title

    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {

      tabIndex: "-1",

      ref: input => {

        this.mainContentHeader = input;

      }

      id: "mainContentHeader"

    })), !isWelcomeScreen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_MSLocalized__WEBPACK_IMPORTED_MODULE_1__["Localized"], {

      text: content.subtitle

    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", null)) : null), content.tiles && content.tiles.type === "colorway" && content.tiles.colorways ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Colorways__WEBPACK_IMPORTED_MODULE_2__["Colorways"], {

browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx

+10 −7
Original line number Diff line number Diff line
@@ -42,7 +42,15 @@ export class MultiStageProtonScreen extends React.PureComponent { 
    }



    return (

      <main className={`screen ${this.props.id} ${screenClassName}`}>

      <main

        className={`screen ${this.props.id} ${screenClassName}`}

        role="dialog"

        tabIndex="-1"

        aria-labelledby="mainContentHeader"

        ref={input => {

          this.mainContentHeader = input;

        }}

      >

        {isWelcomeScreen ? (

          <div className="section-left">

            <div className="message-text">
@@ -88,12 +96,7 @@ export class MultiStageProtonScreen extends React.PureComponent { 
                }`}

              >

                <Localized text={content.title}>

                  <h1

                    tabIndex="-1"

                    ref={input => {

                      this.mainContentHeader = input;

                    }}

                  />

                  <h1 id="mainContentHeader" />

                </Localized>

                {!isWelcomeScreen ? (

                  <Localized text={content.subtitle}>

browser/components/newtab/data/content/activity-stream.bundle.js

+2 −6
Original line number Diff line number Diff line
@@ -3186,8 +3186,7 @@ class _DiscoveryStreamBase extends react__WEBPACK_IMPORTED_MODULE_12___default.a 
          const prefix = `.ds-layout > .ds-column:nth-child(${rowIndex + 1}) .ds-column-grid > :nth-child(${componentIndex + 1})`; // NB: Splitting on "," doesn't work with strings with commas, but

          // we're okay with not supporting those selectors









          rule.selectorText = selectors.split(",").map(selector => prefix + ( // Assume :pseudo-classes are for component instead of descendant









          selector[0] === ":" ? "" : " ") + selector).join(","); // CSSOM silently ignores bad selectors, so we'll be noisy instead









          rule.selectorText = selectors.split(",").map(selector => prefix + (selector[0] === ":" ? "" : " ") + selector).join(","); // CSSOM silently ignores bad selectors, so we'll be noisy instead

















          if (rule.selectorText === DUMMY_CSS_SELECTOR) {









            console.error(`Bad CSS selector ${selectors}`); // eslint-disable-line no-console








@@ -5838,10 +5837,7 @@ class Section extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureComponent







    const wasCollapsed = prevProps.pref.collapsed;

















    if ( // Don't send impression stats for the empty state









    props.rows.length && ( // We only want to send impression stats if the content of the cards has changed









    // and the section is not collapsed...









    props.rows !== prevProps.rows && !isCollapsed || // or if we are expanding a section that was collapsed.









    wasCollapsed && !isCollapsed)) {









    props.rows.length && (props.rows !== prevProps.rows && !isCollapsed || wasCollapsed && !isCollapsed)) {









      this.sendImpressionStatsOrAddListener();









    }









  }