Editor: when Toggle navigation receives state false, focus (#37265)

* Site Editor: when Toggle navigation receives state false, focus the trigger for screen readers. * Add comment that points to a future PR Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: George Mamadashvili <[email protected]>
WordPress · Dec 21, 2021 · 0e76b33 · 0e76b33
1 parent 4512756
commit 0e76b33
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
 import {
 	Button,
 	Icon,
@@ -40,6 +41,16 @@ function NavigationToggle( { icon } ) {
 
 	const disableMotion = useReducedMotion();
 
+	const navigationToggleRef = useRef();
+
+	useEffect( () => {
+		// TODO: Remove this effect when alternative solution is merged.
+		// See: https://github.com/WordPress/gutenberg/pull/37314
+		if ( ! isNavigationOpen ) {
+			navigationToggleRef.current.focus();
+		}
+	}, [ isNavigationOpen ] );
+
 	const toggleNavigationPanel = () =>
 		setIsNavigationPanelOpened( ! isNavigationOpen );
 
@@ -79,6 +90,7 @@ function NavigationToggle( { icon } ) {
 			<Button
 				className="edit-site-navigation-toggle__button has-icon"
 				label={ __( 'Toggle navigation' ) }
+				ref={ navigationToggleRef }
 				// isPressed will add unwanted styles.
 				aria-pressed={ isNavigationOpen }
 				onClick={ toggleNavigationPanel }