Interface regions: fix focus style (on click) (#27074)

WordPress · Nov 18, 2020 · 9d80a39 · 9d80a39
1 parent b7174b3
commit 9d80a39
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/packages/components/src/higher-order/navigate-regions/index.js b/packages/components/src/higher-order/navigate-regions/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback, useState, useRef, useEffect } from '@wordpress/element';
 import {
 	createHigherOrderComponent,
 	useKeyboardShortcut,
@@ -14,6 +14,8 @@ const defaultShortcuts = {
 };
 
 export function useNavigateRegions( ref, shortcuts = defaultShortcuts ) {
+	const [ isFocusingRegions, setIsFocusingRegions ] = useState( false );
+
 	function focusRegion( offset ) {
 		const regions = Array.from(
 			ref.current.querySelectorAll( '[role="region"]' )
@@ -33,6 +35,7 @@ export function useNavigateRegions( ref, shortcuts = defaultShortcuts ) {
 		}
 
 		nextRegion.focus();
+		setIsFocusingRegions( true );
 	}
 	const focusPrevious = useCallback( () => focusRegion( -1 ), [] );
 	const focusNext = useCallback( () => focusRegion( 1 ), [] );
@@ -41,14 +44,32 @@ export function useNavigateRegions( ref, shortcuts = defaultShortcuts ) {
 		bindGlobal: true,
 	} );
 	useKeyboardShortcut( shortcuts.next, focusNext, { bindGlobal: true } );
+
+	useEffect( () => {
+		function onClick() {
+			setIsFocusingRegions( false );
+		}
+
+		ref.current.addEventListener( 'click', onClick );
+
+		return () => {
+			ref.current.removeEventListener( 'click', onClick );
+		};
+	}, [ setIsFocusingRegions ] );
+
+	if ( ! isFocusingRegions ) {
+		return;
+	}
+
+	return 'is-focusing-regions';
 }
 
 export default createHigherOrderComponent(
 	( Component ) => ( { shortcuts, ...props } ) => {
 		const ref = useRef();
-		useNavigateRegions( ref, shortcuts );
+		const className = useNavigateRegions( ref, shortcuts );
 		return (
-			<div ref={ ref }>
+			<div ref={ ref } className={ className }>
 				<Component { ...props } />
 			</div>
 		);

diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -1,6 +1,9 @@
+// Allow the position to be easily overridden to e.g. fixed.
 [role="region"] {
 	position: relative;
+}
 
+.is-focusing-regions [role="region"] {
 	// For browsers that don't support outline-offset (IE11).
 	&:focus::after {
 		content: "";

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -46,7 +46,8 @@ function InterfaceSkeleton(
 
 	ref = ref || fallbackRef;
 
-	useNavigateRegions( ref, shortcuts );
+	const regionsClassName = useNavigateRegions( ref, shortcuts );
+
 	useHTMLClass( 'interface-interface-skeleton__html-container' );
 
 	const defaultLabels = {
@@ -82,7 +83,8 @@ function InterfaceSkeleton(
 			ref={ ref }
 			className={ classnames(
 				className,
-				'interface-interface-skeleton'
+				'interface-interface-skeleton',
+				regionsClassName
 			) }
 		>
 			{ !! drawer && (