Fix Shift+Tab to Block Toolbar (#52613)

* Fix Shift+Tab to Block Toolbar * Add changelog entry
WordPress · Jul 14, 2023 · 09c02a4 · 09c02a4 · github-actions · Jul 14, 2023
1 parent 63cec53
commit 09c02a4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -11,6 +11,7 @@
 
 -   `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([#52356](https://github.com/WordPress/gutenberg/pull/52356)).
 -   `Item`: Unify focus style and add default font styles. ([#52495](https://github.com/WordPress/gutenberg/pull/52495)).
+-   `Toolbar`: Fix toolbar items not being tabbable on the first render. ([#52613](https://github.com/WordPress/gutenberg/pull/52613))
 
 ## 25.3.0 (2023-07-05)
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -30,7 +30,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.2.10",
+		"@ariakit/react": "^0.2.12",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",

diff --git a/test/e2e/specs/editor/various/navigable-toolbar.spec.js b/test/e2e/specs/editor/various/navigable-toolbar.spec.js
@@ -45,4 +45,19 @@ test.describe( 'Block Toolbar', () => {
 			expect( scrollTopBefore ).toBe( scrollTopAfter );
 		} );
 	} );
+
+	test( 'should focus with Shift+Tab', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.insertBlock( { name: 'core/paragraph' } );
+		await page.keyboard.type( 'a' );
+		await pageUtils.pressKeys( 'shift+Tab' );
+		await expect(
+			page
+				.getByRole( 'toolbar', { name: 'Block Tools' } )
+				.getByRole( 'button', { name: 'Paragraph' } )
+		).toBeFocused();
+	} );
 } );