Snackbar: fix focus loss on dismiss (#34736)

WordPress · Sep 10, 2021 · f7e057b · f7e057b
1 parent 98f1181
commit f7e057b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/packages/components/src/snackbar/index.js b/packages/components/src/snackbar/index.js
@@ -53,6 +53,7 @@ function Snackbar(
 		// It is distinct from onRemove, which _looks_ like a callback but is
 		// actually the function to call to remove the snackbar from the UI.
 		onDismiss = noop,
+		listRef,
 	},
 	ref
 ) {
@@ -63,6 +64,9 @@ function Snackbar(
 			event.preventDefault();
 		}
 
+		// Prevent focus loss by moving it to the list element.
+		listRef.current.focus();
+
 		onDismiss();
 		onRemove();
 	}

diff --git a/packages/components/src/snackbar/list.js b/packages/components/src/snackbar/list.js
@@ -8,6 +8,7 @@ import { omit, noop } from 'lodash';
  * WordPress dependencies
  */
 import { useReducedMotion } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -56,11 +57,12 @@ const SNACKBAR_REDUCE_MOTION_VARIANTS = {
  * @return {Object} The rendered notices list.
  */
 function SnackbarList( { notices, className, children, onRemove = noop } ) {
+	const listRef = useRef();
 	const isReducedMotion = useReducedMotion();
 	className = classnames( 'components-snackbar-list', className );
 	const removeNotice = ( notice ) => () => onRemove( notice.id );
 	return (
-		<div className={ className }>
+		<div className={ className } tabIndex={ -1 } ref={ listRef }>
 			{ children }
 			<AnimatePresence>
 				{ notices.map( ( notice ) => {
@@ -81,6 +83,7 @@ function SnackbarList( { notices, className, children, onRemove = noop } ) {
 								<Snackbar
 									{ ...omit( notice, [ 'content' ] ) }
 									onRemove={ removeNotice( notice ) }
+									listRef={ listRef }
 								>
 									{ notice.content }
 								</Snackbar>

diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
@@ -889,6 +889,10 @@ async function saveWidgets() {
 	// Close the snackbar.
 	const savedSnackbar = await find( savedSnackbarQuery );
 	await savedSnackbar.click();
+	// Expect focus not to be lost.
+	await expect(
+		await page.evaluate( () => document.activeElement.className )
+	).toBe( 'components-snackbar-list edit-widgets-notices__snackbar' );
 	await expect( savedSnackbarQuery ).not.toBeFound();
 }