commit 768fb6e29db10ea02ed0f7b9121c19193d624dce parent 9b4fc3dfaf95dbc331835db73c74ceb2df28c818 Author: Reem H <42309026+reemhamz@users.noreply.github.com> Date: Thu, 11 Dec 2025 05:42:21 +0000 Bug 2005377 - Bring focus to the back button when selecting a wallpaper category to stop focus from leaking. r=home-newtab-reviewers,npypchenko Differential Revision: https://phabricator.services.mozilla.com/D275910 Diffstat:
4 files changed, 24 insertions(+), 10 deletions(-)
diff --git a/browser/extensions/newtab/content-src/components/WallpaperCategories/WallpaperCategories.jsx b/browser/extensions/newtab/content-src/components/WallpaperCategories/WallpaperCategories.jsx @@ -46,11 +46,14 @@ export class _WallpaperCategories extends React.PureComponent { this.focusCategory = this.focusCategory.bind(this); this.handleUpload = this.handleUpload.bind(this); this.handleBack = this.handleBack.bind(this); + this.handleWallpaperListEntered = + this.handleWallpaperListEntered.bind(this); this.getRGBColors = this.getRGBColors.bind(this); this.prefersHighContrastQuery = null; this.prefersDarkQuery = null; this.categoryRef = []; // store references for wallpaper category list this.wallpaperRef = []; // store reference for wallpaper selection list + this.arrowButtonRef = React.createRef(); // Used to focus arrow button when category opens this.customColorPickerRef = React.createRef(); // Used to determine contrast icon color for custom color picker this.customColorInput = React.createRef(); // Used to determine contrast icon color for custom color picker this.state = { @@ -186,7 +189,7 @@ export class _WallpaperCategories extends React.PureComponent { if (event.key === "Tab") { if (event.shiftKey) { event.preventDefault(); - this.backToMenuButton?.focus(); + this.arrowButtonRef.current?.focus(); } else { event.preventDefault(); // prevent tabbing within wallpaper selection. We should only be using the Tab key to tab between groups } @@ -380,6 +383,10 @@ export class _WallpaperCategories extends React.PureComponent { }); } + handleWallpaperListEntered() { + this.arrowButtonRef.current?.focus(); + } + // Record user interaction when changing wallpaper and reseting wallpaper to default handleUserEvent(type, data) { this.props.dispatch(ac.OnlyToMain({ type, data })); @@ -648,15 +655,14 @@ export class _WallpaperCategories extends React.PureComponent { timeout={300} classNames="wallpaper-list" unmountOnExit={true} + onEntered={this.handleWallpaperListEntered} > <section className="category wallpaper-list ignore-color-mode"> <button + ref={this.arrowButtonRef} className="arrow-button" data-l10n-id={activeCategoryFluentID} onClick={this.handleBack} - ref={el => { - this.backToMenuButton = el; - }} /> <div role="grid" diff --git a/browser/extensions/newtab/content-src/components/WallpaperCategories/_WallpaperCategories.scss b/browser/extensions/newtab/content-src/components/WallpaperCategories/_WallpaperCategories.scss @@ -39,6 +39,8 @@ -moz-context-properties: fill; fill: currentColor; min-height: 1rem; + margin-inline-start: var(--space-xsmall); + margin-block-start: var(--space-xsmall); } .wallpaper-input { diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -2469,6 +2469,8 @@ main section { -moz-context-properties: fill; fill: currentColor; min-height: 1rem; + margin-inline-start: var(--space-xsmall); + margin-block-start: var(--space-xsmall); } .arrow-button:dir(rtl) { background: url("chrome://global/skin/icons/arrow-right.svg") no-repeat right center; diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -13990,11 +13990,13 @@ class _WallpaperCategories extends (external_React_default()).PureComponent { this.focusCategory = this.focusCategory.bind(this); this.handleUpload = this.handleUpload.bind(this); this.handleBack = this.handleBack.bind(this); + this.handleWallpaperListEntered = this.handleWallpaperListEntered.bind(this); this.getRGBColors = this.getRGBColors.bind(this); this.prefersHighContrastQuery = null; this.prefersDarkQuery = null; this.categoryRef = []; // store references for wallpaper category list this.wallpaperRef = []; // store reference for wallpaper selection list + this.arrowButtonRef = /*#__PURE__*/external_React_default().createRef(); // Used to focus arrow button when category opens this.customColorPickerRef = /*#__PURE__*/external_React_default().createRef(); // Used to determine contrast icon color for custom color picker this.customColorInput = /*#__PURE__*/external_React_default().createRef(); // Used to determine contrast icon color for custom color picker this.state = { @@ -14107,7 +14109,7 @@ class _WallpaperCategories extends (external_React_default()).PureComponent { if (event.key === "Tab") { if (event.shiftKey) { event.preventDefault(); - this.backToMenuButton?.focus(); + this.arrowButtonRef.current?.focus(); } else { event.preventDefault(); // prevent tabbing within wallpaper selection. We should only be using the Tab key to tab between groups } @@ -14281,6 +14283,9 @@ class _WallpaperCategories extends (external_React_default()).PureComponent { }); }); } + handleWallpaperListEntered() { + this.arrowButtonRef.current?.focus(); + } // Record user interaction when changing wallpaper and reseting wallpaper to default handleUserEvent(type, data) { @@ -14517,16 +14522,15 @@ class _WallpaperCategories extends (external_React_default()).PureComponent { in: !!activeCategory, timeout: 300, classNames: "wallpaper-list", - unmountOnExit: true + unmountOnExit: true, + onEntered: this.handleWallpaperListEntered }, /*#__PURE__*/external_React_default().createElement("section", { className: "category wallpaper-list ignore-color-mode" }, /*#__PURE__*/external_React_default().createElement("button", { + ref: this.arrowButtonRef, className: "arrow-button", "data-l10n-id": activeCategoryFluentID, - onClick: this.handleBack, - ref: el => { - this.backToMenuButton = el; - } + onClick: this.handleBack }), /*#__PURE__*/external_React_default().createElement("div", { role: "grid", "aria-label": "Wallpaper selection. Use arrow keys to navigate."