Widget Editor: Focus toggle button when the global inserter is closed

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

@@ -7,27 +7,47 @@ import {
 	__experimentalUseDialog as useDialog,
 } from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import useWidgetLibraryInsertionPoint from '../../hooks/use-widget-library-insertion-point';
 import { store as editWidgetsStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 export default function InserterSidebar() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();
 
+	const inserterSidebarToggleRef = useSelect( ( select ) => {
+		return unlock(
+			select( editWidgetsStore )
+		).getInserterSidebarToggleRef();
+	}, [] );
+
 	const { setIsInserterOpened } = useDispatch( editWidgetsStore );
 
 	const closeInserter = useCallback( () => {
-		return setIsInserterOpened( false );
-	}, [ setIsInserterOpened ] );
+		setIsInserterOpened( false );
+		inserterSidebarToggleRef.current?.focus();
+	}, [ setIsInserterOpened, inserterSidebarToggleRef ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeInserter();
+			}
+		},
+		[ closeInserter ]
+	);
 
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: closeInserter,
 		focusOnMount: true,
+		onKeyDown: closeOnEscape,
 	} );
 
 	const libraryRef = useRef();

test/e2e/specs/widgets/editing-widgets.spec.js

@@ -83,6 +83,10 @@ test.describe( 'Widgets screen', () => {
 			{ name: /^Empty block/ }
 		);
 
+		// When the block is focused, the global inserter is closed,
+		// which in turn focuses the global inserter toggle.
+		// So we need to explicitly focus the paragraph block again.
+		await addedParagraphBlockInFirstWidgetArea.focus();
 		await addedParagraphBlockInFirstWidgetArea.focus();
 		await page.keyboard.type( 'First Paragraph' );
 
@@ -91,6 +95,10 @@ test.describe( 'Widgets screen', () => {
 		// TODO: We can add a test for the insertion indicator here.
 		await addParagraphBlock.click();
 
+		// When the block is focused, the global inserter is closed,
+		// which in turn focuses the global inserter toggle.
+		// So we need to explicitly focus the paragraph block again.
+		await addedParagraphBlockInFirstWidgetArea.focus();
 		await addedParagraphBlockInFirstWidgetArea.focus();
 		await page.keyboard.type( 'Second Paragraph' );
 
@@ -116,6 +124,11 @@ test.describe( 'Widgets screen', () => {
 			secondWidgetArea.getByRole( 'document', {
 				name: /^Empty block/,
 			} );
+
+		// When the block is focused, the global inserter is closed,
+		// which in turn focuses the global inserter toggle.
+		// So we need to explicitly focus the paragraph block again.
+		await addedParagraphBlockInSecondWidgetArea.focus();
 		await addedParagraphBlockInSecondWidgetArea.focus();
 		await page.keyboard.type( 'Third Paragraph' );
 
@@ -145,6 +158,25 @@ test.describe( 'Widgets screen', () => {
 		} );
 	} );
 
+	test( 'Should focus the global inserter toggle when the global inserter is closed', async ( {
+		page,
+	} ) => {
+		const blockInserterToggle = page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Block Inserter', exact: true } );
+		await blockInserterToggle.click();
+		await page
+			.getByRole( 'button', { name: 'Close Block Inserter' } )
+			.click();
+
+		await expect( blockInserterToggle ).toBeFocused();
+
+		await blockInserterToggle.click();
+		await page.keyboard.press( 'Escape' );
+
+		await expect( blockInserterToggle ).toBeFocused();
+	} );
+
 	test( 'Should insert content using the inline inserter', async ( {
 		page,
 		widgetsScreen,