diff --git a/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/inserter-sidebar.js index c0f4e79dffddf..30698c838bf83 100644 --- 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 (
-
+
-
+ +
setIsInserterOpened( false ), + focusOnMount: null, } ); + const inserterContentRef = useRef(); + useEffect( () => { + inserterContentRef.current + .querySelector( '.block-editor-inserter__search input' ) + .focus(); + }, [] ); + return (
-
+
-
+ +
{ - 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 (
-
-
-
+ +