Accessibility improvements for Block Inserter

packages/block-editor/src/components/inserter/library.js

@@ -24,6 +24,7 @@ function InserterLibrary( {
 	__experimentalFilterValue,
 	onSelect = noop,
 	shouldFocusBlock = false,
+	isOpen = false,
 } ) {
 	const destinationRootClientId = useSelect(
 		( select ) => {
@@ -38,6 +39,7 @@ function InserterLibrary( {
 
 	return (
 		<InserterMenu
+			isOpen={ isOpen }
 			onSelect={ onSelect }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }

packages/block-editor/src/components/inserter/menu.js

@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useMemo } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useEffect,
+	useCallback,
+	useMemo,
+} from '@wordpress/element';
 import { VisuallyHidden, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -29,6 +35,7 @@ function InserterMenu( {
 	showMostUsedBlocks,
 	__experimentalFilterValue = '',
 	shouldFocusBlock = true,
+	isOpen = false,
 } ) {
 	const [ filterValue, setFilterValue ] = useState(
 		__experimentalFilterValue
@@ -168,13 +175,23 @@ function InserterMenu( {
 		[ blocksTab, patternsTab, reusableBlocksTab ]
 	);
 
+	const searchControlRef = useRef();
+	useEffect( () => {
+		// Make sure focus only occurs if open
+		if ( ! isOpen ) {
+			return;
+		}
+		searchControlRef.current.focus();
+	}, [ isOpen ] );
+
 	return (
 		<div className="block-editor-inserter__menu">
 			<div className="block-editor-inserter__main-area">
 				{ /* the following div is necessary to fix the sticky position of the search form */ }
 				<div className="block-editor-inserter__content">
 					<SearchControl
 						className="block-editor-inserter__search"
+						ref={ searchControlRef }
 						onChange={ ( value ) => {
 							if ( hoveredItem ) setHoveredItem( null );
 							setFilterValue( value );

packages/edit-post/src/components/layout/index.js

@@ -170,7 +170,7 @@ function Layout( { styles } ) {
 
 	const secondarySidebar = () => {
 		if ( mode === 'visual' && isInserterOpened ) {
-			return <InserterSidebar />;
+			return <InserterSidebar isOpen={ isInserterOpened } />;
 		}
 		if ( mode === 'visual' && isListViewOpened ) {
 			return <ListViewSidebar />;

packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js

@@ -2,20 +2,21 @@
  * 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';
 
 /**
  * Internal dependencies
  */
 import { store as editPostStore } from '../../store';
 
-export default function InserterSidebar() {
+export default function InserterSidebar( isOpen = false ) {
 	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
 		const { isFeatureActive, __experimentalGetInsertionPoint } = select(
 			editPostStore
@@ -28,8 +29,10 @@ 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,
 	} );
 
 	return (
@@ -38,14 +41,16 @@ export default function InserterSidebar() {
 			{ ...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>
+			</TagName>
 			<div className="edit-post-editor__inserter-panel-content">
 				<Library
+					isOpen={ isOpen }
 					showMostUsedBlocks={ showMostUsedBlocks }
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobileViewport }

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,