From 0da63c66e5ae66b2fe9ae01dde100cbdd3e9463d Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Tue, 16 Jun 2020 16:14:23 -0300
Subject: [PATCH 1/5] Implement roving tabindex on grouped blocks toolbars

---
 .../components/block-parent-selector/index.js |  4 +-
 .../block-parent-selector/style.scss          |  9 --
 .../various/toolbar-roving-tabindex.test.js   | 83 +++++++++++++++++++
 3 files changed, 85 insertions(+), 11 deletions(-)
 create mode 100644 packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js

diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js
index 7fb79764bbe477..c6b7a458ea3887 100644
--- a/packages/block-editor/src/components/block-parent-selector/index.js
+++ b/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(
diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss
index 65276179369c68..65e0d4612af002 100644
--- a/packages/block-editor/src/components/block-parent-selector/style.scss
+++ b/packages/block-editor/src/components/block-parent-selector/style.scss
@@ -2,13 +2,4 @@
 	background: $white;
 	border: $border-width solid $dark-gray-primary;
 	border-radius: $radius-block-ui;
-	padding: $grid-unit-10 - $border-width;
-	line-height: 1;
-
-	.block-editor-block-parent-selector__button {
-		min-width: auto;
-		width: $grid-unit-40;
-		height: $grid-unit-40;
-		padding: 0;
-	}
 }
diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
new file mode 100644
index 00000000000000..4f37df6d564595
--- /dev/null
+++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	pressKeyWithModifier,
+	insertBlock,
+} from '@wordpress/e2e-test-utils';
+
+async function focusBlockToolbar() {
+	// Move the mouse to show the block toolbar
+	await page.mouse.move( 0, 0 );
+	await page.mouse.move( 10, 10 );
+	await pressKeyWithModifier( 'shift', 'Tab' );
+}
+
+async function expectLabelToHaveFocus( label ) {
+	await expect(
+		await page.evaluate( () =>
+			document.activeElement.getAttribute( 'aria-label' )
+		)
+	).toBe( label );
+}
+
+async function testToolbar( 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 testGroup( currentBlockLabel ) {
+	await page.click( '[aria-label="Change block type or style"]' );
+	await page.evaluate( () => {
+		document.querySelector( '.editor-block-list-item-group' ).click();
+	} );
+	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 testToolbar( 'Paragraph block' );
+		await testGroup( 'Paragraph block' );
+	} );
+
+	it( 'ensures heading block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'Heading' );
+		await page.keyboard.type( 'Heading' );
+		await testToolbar( 'Write heading…' );
+		await testGroup( 'Write heading…' );
+	} );
+
+	it( 'ensures list block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'List' );
+		await page.keyboard.type( 'List' );
+		await testToolbar( 'Write list…' );
+		await testGroup( 'Write list…' );
+	} );
+
+	it( 'ensures image block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'Image' );
+		await testToolbar( 'Block: Image' );
+		await testGroup( 'Block: Image' );
+	} );
+} );

From 8c42c5a60b31858f79fd71220b9fb13fd5344c35 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Wed, 17 Jun 2020 09:37:57 -0300
Subject: [PATCH 2/5] Fix styles

---
 .../src/components/block-parent-selector/style.scss             | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss
index 9ea6c66704229f..65e0d4612af002 100644
--- a/packages/block-editor/src/components/block-parent-selector/style.scss
+++ b/packages/block-editor/src/components/block-parent-selector/style.scss
@@ -1,3 +1,5 @@
 .block-editor-block-parent-selector {
 	background: $white;
+	border: $border-width solid $dark-gray-primary;
+	border-radius: $radius-block-ui;
 }

From 1a71caaed7d56e00e97b26d677fc313810ed54cd Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Wed, 17 Jun 2020 09:39:01 -0300
Subject: [PATCH 3/5] Use alt+F10 to focus toolbar on e2e tests

---
 .../specs/editor/various/toolbar-roving-tabindex.test.js     | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
index 4f37df6d564595..5eff6f75be38a7 100644
--- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
+++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
@@ -8,10 +8,7 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 async function focusBlockToolbar() {
-	// Move the mouse to show the block toolbar
-	await page.mouse.move( 0, 0 );
-	await page.mouse.move( 10, 10 );
-	await pressKeyWithModifier( 'shift', 'Tab' );
+	await pressKeyWithModifier( 'alt', 'F10' );
 }
 
 async function expectLabelToHaveFocus( label ) {

From aa494890f36253965ac9c41b0b6eb91caee6e2a0 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Wed, 17 Jun 2020 09:55:41 -0300
Subject: [PATCH 4/5] Rename e2e test helpers

---
 .../various/toolbar-roving-tabindex.test.js   | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
index 5eff6f75be38a7..7ab328b6ea435d 100644
--- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
+++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
@@ -19,7 +19,7 @@ async function expectLabelToHaveFocus( label ) {
 	).toBe( label );
 }
 
-async function testToolbar( currentBlockLabel ) {
+async function testBlockToolbarKeyboardNavigation( currentBlockLabel ) {
 	await focusBlockToolbar();
 	await expectLabelToHaveFocus( 'Change block type or style' );
 	await page.keyboard.press( 'ArrowRight' );
@@ -30,11 +30,14 @@ async function testToolbar( currentBlockLabel ) {
 	await expectLabelToHaveFocus( 'Move up' );
 }
 
-async function testGroup( currentBlockLabel ) {
+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 );
@@ -54,27 +57,31 @@ describe( 'Toolbar roving tabindex', () => {
 	it( 'ensures paragraph block toolbar uses roving tabindex', async () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Paragraph' );
-		await testToolbar( 'Paragraph block' );
-		await testGroup( 'Paragraph block' );
+		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 testToolbar( 'Write heading…' );
-		await testGroup( 'Write 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 testToolbar( 'Write list…' );
-		await testGroup( 'Write list…' );
+		await testBlockToolbarKeyboardNavigation( 'Write list…' );
+		await wrapCurrentBlockWithGroup();
+		await testGroupKeyboardNavigation( 'Write list…' );
 	} );
 
 	it( 'ensures image block toolbar uses roving tabindex', async () => {
 		await insertBlock( 'Image' );
-		await testToolbar( 'Block: Image' );
-		await testGroup( 'Block: Image' );
+		await testBlockToolbarKeyboardNavigation( 'Block: Image' );
+		await wrapCurrentBlockWithGroup();
+		await testGroupKeyboardNavigation( 'Block: Image' );
 	} );
 } );

From 19039fc9bb326fe275ac6abc3cc939acb60b4632 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Wed, 17 Jun 2020 10:01:22 -0300
Subject: [PATCH 5/5] Fix styles

---
 .../src/components/block-parent-selector/style.scss      | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-parent-selector/style.scss b/packages/block-editor/src/components/block-parent-selector/style.scss
index 65e0d4612af002..594a3be2de5ba7 100644
--- a/packages/block-editor/src/components/block-parent-selector/style.scss
+++ b/packages/block-editor/src/components/block-parent-selector/style.scss
@@ -1,5 +1,10 @@
 .block-editor-block-parent-selector {
 	background: $white;
-	border: $border-width solid $dark-gray-primary;
-	border-radius: $radius-block-ui;
+
+	.block-editor-block-parent-selector__button {
+		width: $grid-unit-60;
+		height: $grid-unit-60;
+		border: $border-width solid $dark-gray-primary;
+		border-radius: $radius-block-ui;
+	}
 }