Inserter: Should receive focus on open (WordPress#67754)

* Set default tab to 'blocks' if none passed * Add tests for focusing blocks tab and closing inserter on keypresses
yogeshbhutkar · Dec 18, 2024 · b4e2222 · b4e2222
1 parent 7d3fa75
commit b4e2222
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -82,6 +82,8 @@ function InserterMenu(
 		if ( isZoomOutMode ) {
 			return 'patterns';
 		}
+
+		return 'blocks';
 	}
 	const [ selectedTab, setSelectedTab ] = useState( getInitialTab() );
 

diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -28,32 +28,51 @@ test.describe( 'Site Editor Inserter', () => {
 		},
 	} );
 
-	// eslint-disable-next-line playwright/expect-expect
 	test( 'inserter toggle button should toggle global inserter', async ( {
 		InserterUtils,
+		page,
+		editor,
 	} ) => {
 		await InserterUtils.openBlockLibrary();
 		await InserterUtils.closeBlockLibrary();
-	} );
 
-	// A test for https://github.com/WordPress/gutenberg/issues/43090.
-	test( 'should close the inserter when clicking on the toggle button', async ( {
-		editor,
-		InserterUtils,
-	} ) => {
-		const beforeBlocks = await editor.getBlocks();
+		await test.step( 'should open the inserter via enter keypress on toggle button', async () => {
+			await InserterUtils.inserterButton.focus();
+			await page.keyboard.press( 'Enter' );
+			await expect( InserterUtils.blockLibrary ).toBeVisible();
+		} );
 
-		await InserterUtils.openBlockLibrary();
-		await InserterUtils.expectActiveTab( 'Blocks' );
-		await InserterUtils.blockLibrary
-			.getByRole( 'option', { name: 'Buttons' } )
-			.click();
+		await test.step( 'should set focus to the blocks tab when opening the inserter', async () => {
+			await expect(
+				InserterUtils.getBlockLibraryTab( 'Blocks' )
+			).toBeFocused();
+		} );
+
+		await test.step( 'should close the inserter via escape keypress', async () => {
+			await page.keyboard.press( 'Escape' );
+			await expect( InserterUtils.blockLibrary ).toBeHidden();
+		} );
 
-		await expect
-			.poll( editor.getBlocks )
-			.toMatchObject( [ ...beforeBlocks, { name: 'core/buttons' } ] );
+		await test.step( 'should focus inserter toggle button after closing the inserter via escape keypress', async () => {
+			await expect( InserterUtils.inserterButton ).toBeFocused();
+		} );
 
-		await InserterUtils.closeBlockLibrary();
+		// A test for https://github.com/WordPress/gutenberg/issues/43090.
+		await test.step( 'should close the inserter when clicking on the toggle button', async () => {
+			const beforeBlocks = await editor.getBlocks();
+
+			await InserterUtils.openBlockLibrary();
+			await InserterUtils.expectActiveTab( 'Blocks' );
+			await InserterUtils.blockLibrary
+				.getByRole( 'option', { name: 'Buttons' } )
+				.click();
+
+			await expect
+				.poll( editor.getBlocks )
+				.toMatchObject( [ ...beforeBlocks, { name: 'core/buttons' } ] );
+
+			await InserterUtils.closeBlockLibrary();
+		} );
 	} );
 
 	test.describe( 'Inserter Zoom Level UX', () => {