Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-25 11:58:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D131413
This commit is contained in:
Emily McMinn 2021-12-06 15:14:59 +00:00
parent 5630f0a4d6
commit 8bcf4df54c
3 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
View File

@ -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"], {

17
browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx
View File

@ -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}>

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

@ -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();
}
}