Move clear selection handling down to the List View container so that…

… if focus is on the close or tab buttons, Escape closes the list view instead of clearing
WordPress · Mar 9, 2023 · f3b91a0 · f3b91a0
1 parent 1d4c96f
commit f3b91a0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js
@@ -49,6 +49,13 @@ export default function ListViewSidebar() {
 	const [ tab, setTab ] = useState( 'list-view' );
 
 	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			setIsListViewOpened( false );
+		}
+	}
+
+	function clearSelectionOnEscape( event ) {
 		// If there is a block selection, then skip closing the list view
 		// and clear out the block selection instead.
 		if (
@@ -60,12 +67,6 @@ export default function ListViewSidebar() {
 			event.preventDefault();
 			clearSelectedBlock();
 			speak( __( 'All blocks deselected.' ), 'assertive' );
-			return;
-		}
-
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			setIsListViewOpened( false );
 		}
 	}
 
@@ -178,7 +179,11 @@ export default function ListViewSidebar() {
 				className="edit-post-editor__list-view-container"
 			>
 				{ tab === 'list-view' && (
-					<div className="edit-post-editor__list-view-panel-content">
+					// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+					<div
+						className="edit-post-editor__list-view-panel-content"
+						onKeyDown={ clearSelectionOnEscape }
+					>
 						<ListView />
 					</div>
 				) }

diff --git a/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js
@@ -39,6 +39,12 @@ export default function ListViewSidebar() {
 	const contentFocusReturnRef = useFocusReturn();
 
 	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			setIsListViewOpened( false );
+		}
+	}
+
+	function clearSelectionOnEscape( event ) {
 		// If there is a block selection, then skip closing the list view
 		// and clear out the block selection instead.
 		if (
@@ -49,19 +55,14 @@ export default function ListViewSidebar() {
 			event.preventDefault();
 			clearSelectedBlock();
 			speak( __( 'All blocks deselected.' ), 'assertive' );
-			return;
-		}
-
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			setIsListViewOpened( false );
 		}
 	}
 
 	const instanceId = useInstanceId( ListViewSidebar );
 	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
 
 	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		<div
 			aria-labelledby={ labelId }
 			className="edit-site-editor__list-view-panel"
@@ -84,9 +85,11 @@ export default function ListViewSidebar() {
 					contentFocusReturnRef,
 					focusOnMountRef,
 				] ) }
+				onKeyDown={ clearSelectionOnEscape }
 			>
 				<ListView />
 			</div>
 		</div>
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	);
 }
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/list-view-sidebar.js
@@ -37,7 +37,15 @@ export default function ListViewSidebar() {
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
+
 	function closeOnEscape( event ) {
+		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+			event.preventDefault();
+			setIsListViewOpened( false );
+		}
+	}
+
+	function clearSelectionOnEscape( event ) {
 		// If there is a block selection, then skip closing the list view
 		// and clear out the block selection instead.
 		if (
@@ -48,20 +56,14 @@ export default function ListViewSidebar() {
 			event.preventDefault();
 			clearSelectedBlock();
 			speak( __( 'All blocks deselected.' ), 'assertive' );
-			return;
-		}
-
-		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-			event.preventDefault();
-			setIsListViewOpened( false );
 		}
 	}
 
 	const instanceId = useInstanceId( ListViewSidebar );
 	const labelId = `edit-widgets-editor__list-view-panel-label-${ instanceId }`;
 
 	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		/* eslint-disable jsx-a11y/no-static-element-interactions */
 		<div
 			aria-labelledby={ labelId }
 			className="edit-widgets-editor__list-view-panel"
@@ -84,9 +86,11 @@ export default function ListViewSidebar() {
 					contentFocusReturnRef,
 					focusOnMountRef,
 				] ) }
+				onKeyDown={ clearSelectionOnEscape }
 			>
 				<ListView />
 			</div>
 		</div>
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
 	);
 }