Accessibility improvements for Block Inserter (#37357)

Co-authored-by: Riad Benguella <[email protected]>
WordPress · Jan 7, 2022 · c9425ae · c9425ae
1 parent a3466dd
commit c9425ae
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 27 deletions.
diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js
@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import { close } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -28,23 +30,36 @@ export default function InserterSidebar() {
 	const { setIsInserterOpened } = useDispatch( editPostStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: null,
 	} );
 
+	const inserterContentRef = useRef();
+	useEffect( () => {
+		inserterContentRef.current
+			.querySelector( '.block-editor-inserter__search input' )
+			.focus();
+	}, [] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="edit-post-editor__inserter-panel"
 		>
-			<div className="edit-post-editor__inserter-panel-header">
+			<TagName className="edit-post-editor__inserter-panel-header">
 				<Button
 					icon={ close }
+					label={ __( 'Close block inserter' ) }
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
-			</div>
-			<div className="edit-post-editor__inserter-panel-content">
+			</TagName>
+			<div
+				className="edit-post-editor__inserter-panel-content"
+				ref={ inserterContentRef }
+			>
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }
 					showInserterHelpPanel

diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss
@@ -16,10 +16,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-post-editor__inserter-panel-content,

diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js
@@ -2,13 +2,15 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import { close } from '@wordpress/icons';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,23 +25,36 @@ export default function InserterSidebar() {
 	);
 
 	const isMobile = useViewportMatch( 'medium', '<' );
+	const TagName = ! isMobile ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
+		focusOnMount: null,
 	} );
 
+	const inserterContentRef = useRef();
+	useEffect( () => {
+		inserterContentRef.current
+			.querySelector( '.block-editor-inserter__search input' )
+			.focus();
+	}, [] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="edit-site-editor__inserter-panel"
 		>
-			<div className="edit-site-editor__inserter-panel-header">
+			<TagName className="edit-post-editor__inserter-panel-header">
 				<Button
 					icon={ close }
+					label={ __( 'Close block inserter' ) }
 					onClick={ () => setIsInserterOpened( false ) }
 				/>
-			</div>
-			<div className="edit-site-editor__inserter-panel-content">
+			</TagName>
+			<div
+				className="edit-post-editor__inserter-panel-content"
+				ref={ inserterContentRef }
+			>
 				<Library
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobile }

diff --git a/packages/edit-site/src/components/secondary-sidebar/style.scss b/packages/edit-site/src/components/secondary-sidebar/style.scss
@@ -16,10 +16,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-site-editor__inserter-panel-content,

diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss
@@ -12,10 +12,6 @@
 	padding-right: $grid-unit-10;
 	display: flex;
 	justify-content: flex-end;
-
-	@include break-medium() {
-		display: none;
-	}
 }
 
 .edit-widgets-layout__inserter-panel-content {

diff --git a/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-widgets/src/components/secondary-sidebar/inserter-sidebar.js
@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
 import { close } from '@wordpress/icons';
 import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import {
 	useViewportMatch,
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -24,23 +25,39 @@ export default function InserterSidebar() {
 	const { setIsInserterOpened } = useDispatch( editWidgetsStore );
 
 	const closeInserter = useCallback( () => {
-		return () => setIsInserterOpened( false );
+		return setIsInserterOpened( false );
 	}, [ setIsInserterOpened ] );
 
+	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: closeInserter,
+		focusOnMount: null,
 	} );
 
+	const inserterContentRef = useRef();
+	useEffect( () => {
+		inserterContentRef.current
+			.querySelector( '.block-editor-inserter__search input' )
+			.focus();
+	}, [] );
+
 	return (
 		<div
 			ref={ inserterDialogRef }
 			{ ...inserterDialogProps }
 			className="edit-widgets-layout__inserter-panel"
 		>
-			<div className="edit-widgets-layout__inserter-panel-header">
-				<Button icon={ close } onClick={ closeInserter } />
-			</div>
-			<div className="edit-widgets-layout__inserter-panel-content">
+			<TagName className="edit-widgets-layout__inserter-panel-header">
+				<Button
+					icon={ close }
+					onClick={ closeInserter }
+					label={ __( 'Close block inserter' ) }
+				/>
+			</TagName>
+			<div
+				className="edit-widgets-layout__inserter-panel-content"
+				ref={ inserterContentRef }
+			>
 				<Library
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobileViewport }