From 09c02a4afdd47a0fbc76ccad07ae303897dcb2f7 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Fri, 14 Jul 2023 06:10:07 +0200
Subject: [PATCH] Fix Shift+Tab to Block Toolbar (#52613)

* Fix Shift+Tab to Block Toolbar

* Add changelog entry
---
 package-lock.json                             | 24 +++++++++----------
 packages/components/CHANGELOG.md              |  1 +
 packages/components/package.json              |  2 +-
 .../editor/various/navigable-toolbar.spec.js  | 15 ++++++++++++
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6db4ee9ee666ac..3c96f25259cbce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -101,24 +101,24 @@
 			"dev": true
 		},
 		"@ariakit/core": {
-			"version": "0.2.6",
-			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.2.6.tgz",
-			"integrity": "sha512-83r2YmLvHLsV2NoclM5sfpLXfJ9S3R4lQIZK5Iad/KdfuFolvtVKPVrLW9OGoD1D4OuLxO1PgYKZEDPH0a1TjQ=="
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/@ariakit/core/-/core-0.2.7.tgz",
+			"integrity": "sha512-Hs0N1EMYq88WW4v9xnSIHNR38TvbQuoUX6FYFmeLCZSTIXQBiET7lr1DQXwOOmdEtRtlxQ5HsxbTkxeOkPv+eg=="
 		},
 		"@ariakit/react": {
-			"version": "0.2.10",
-			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.2.10.tgz",
-			"integrity": "sha512-T0ftSgAuEXzA5MvurSWALfJBhTHzEgkXTDWEBTOkSzR5nxilPU/80UgA7dKHi4SGA3wUXIIMjRb42Djk3Qi9pQ==",
+			"version": "0.2.12",
+			"resolved": "https://registry.npmjs.org/@ariakit/react/-/react-0.2.12.tgz",
+			"integrity": "sha512-4rAgMyUURHW78EKgRCanhyRUtsiYCOxO65BBHF4mg3tZsDeOvu9kBG5IAXX8mUgakTcyr0EKXuOtGThaj7gobA==",
 			"requires": {
-				"@ariakit/react-core": "0.2.10"
+				"@ariakit/react-core": "0.2.12"
 			}
 		},
 		"@ariakit/react-core": {
-			"version": "0.2.10",
-			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.2.10.tgz",
-			"integrity": "sha512-/MBX9ToIBQUR//uaOs1XzLz+Zq7ECMQmr670mXiDg3L9bu0siQKP3vD2Fl8RDRWMEMOk6+0Utr3Fm49hYlg24g==",
+			"version": "0.2.12",
+			"resolved": "https://registry.npmjs.org/@ariakit/react-core/-/react-core-0.2.12.tgz",
+			"integrity": "sha512-3KSKlX10nnhCvjsbPW0CAnqG+6grryfwnMkeJJ/h34FSV7hEfUMexmIjKBVZyfBG08Xj8NjSK8kkx9c3ChkXeA==",
 			"requires": {
-				"@ariakit/core": "0.2.6",
+				"@ariakit/core": "0.2.7",
 				"@floating-ui/dom": "^1.0.0",
 				"use-sync-external-store": "^1.2.0"
 			}
@@ -17419,7 +17419,7 @@
 		"@wordpress/components": {
 			"version": "file:packages/components",
 			"requires": {
-				"@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/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 1e7e654ac1c819..8f5d2d946fa389 100644
--- 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
index 74220c11013e2b..455d3daa3c089d 100644
--- 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
index d6524eeabb64b2..abdb1800d150a2 100644
--- 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();
+	} );
 } );