Implement roving tabindex on grouped blocks toolbars (#23216)

* Implement roving tabindex on grouped blocks toolbars

* Fix styles

* Use alt+F10 to focus toolbar on e2e tests

* Rename e2e test helpers

* Fix styles

packages/block-editor/src/components/block-parent-selector/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { Button } from '@wordpress/components';
+import { ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -41,7 +41,7 @@ export default function BlockParentSelector() {
 				className="block-editor-block-parent-selector"
 				key={ firstParentClientId }
 			>
-				<Button
+				<ToolbarButton
 					className="block-editor-block-parent-selector__button"
 					onClick={ () => selectBlock( firstParentClientId ) }
 					label={ sprintf(

packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	pressKeyWithModifier,
+	insertBlock,
+} from '@wordpress/e2e-test-utils';
+
+async function focusBlockToolbar() {
+	await pressKeyWithModifier( 'alt', 'F10' );
+}
+
+async function expectLabelToHaveFocus( label ) {
+	await expect(
+		await page.evaluate( () =>
+			document.activeElement.getAttribute( 'aria-label' )
+		)
+	).toBe( label );
+}
+
+async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) {
+	await focusBlockToolbar();
+	await expectLabelToHaveFocus( 'Change block type or style' );
+	await page.keyboard.press( 'ArrowRight' );
+	await expectLabelToHaveFocus( 'Move up' );
+	await page.keyboard.press( 'Tab' );
+	await expectLabelToHaveFocus( currentBlockLabel );
+	await pressKeyWithModifier( 'shift', 'Tab' );
+	await expectLabelToHaveFocus( 'Move up' );
+}
+
+async function wrapCurrentBlockWithGroup() {
+	await page.click( '[aria-label="Change block type or style"]' );
+	await page.evaluate( () => {
+		document.querySelector( '.editor-block-list-item-group' ).click();
+	} );
+}
+
+async function testGroupKeyboardNavigation( currentBlockLabel ) {
+	await expectLabelToHaveFocus( 'Block: Group' );
+	await page.keyboard.press( 'Tab' );
+	await expectLabelToHaveFocus( currentBlockLabel );
+	await pressKeyWithModifier( 'shift', 'Tab' );
+	await expectLabelToHaveFocus( 'Select parent (Group)' );
+	await page.keyboard.press( 'ArrowRight' );
+	await expectLabelToHaveFocus( 'Change block type or style' );
+}
+
+describe( 'Toolbar roving tabindex', () => {
+	beforeEach( async () => {
+		await createNewPost();
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'First block' );
+	} );
+
+	it( 'ensures paragraph block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'Paragraph' );
+		await testBlockToolbarKeyboardNavigation( 'Paragraph block' );
+		await wrapCurrentBlockWithGroup();
+		await testGroupKeyboardNavigation( 'Paragraph block' );
+	} );
+
+	it( 'ensures heading block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'Heading' );
+		await page.keyboard.type( 'Heading' );
+		await testBlockToolbarKeyboardNavigation( 'Write heading…' );
+		await wrapCurrentBlockWithGroup();
+		await testGroupKeyboardNavigation( 'Write heading…' );
+	} );
+
+	it( 'ensures list block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'List' );
+		await page.keyboard.type( 'List' );
+		await testBlockToolbarKeyboardNavigation( 'Write list…' );
+		await wrapCurrentBlockWithGroup();
+		await testGroupKeyboardNavigation( 'Write list…' );
+	} );
+
+	it( 'ensures image block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'Image' );
+		await testBlockToolbarKeyboardNavigation( 'Block: Image' );
+		await wrapCurrentBlockWithGroup();
+		await testGroupKeyboardNavigation( 'Block: Image' );
+	} );
+} );