From 08a6b6308df5db03027cf5b289cb594d9ada58ad Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Thu, 18 Jun 2020 10:53:51 -0300
Subject: [PATCH] Implement roving tabindex on the Custom HTML block toolbar

---
 packages/block-library/src/html/edit.js           | 15 ++++++++++-----
 .../various/toolbar-roving-tabindex.test.js       |  7 +++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js
index 206ccbac5cca21..9f61c7b2da1035 100644
--- a/packages/block-library/src/html/edit.js
+++ b/packages/block-library/src/html/edit.js
@@ -8,7 +8,12 @@ import {
 	PlainText,
 	transformStyles,
 } from '@wordpress/block-editor';
-import { Button, Disabled, SandBox, ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarButton,
+	Disabled,
+	SandBox,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
 class HTMLEdit extends Component {
@@ -57,20 +62,20 @@ class HTMLEdit extends Component {
 			<div className="wp-block-html">
 				<BlockControls>
 					<ToolbarGroup>
-						<Button
+						<ToolbarButton
 							className="components-tab-button"
 							isPressed={ ! isPreview }
 							onClick={ this.switchToHTML }
 						>
 							<span>HTML</span>
-						</Button>
-						<Button
+						</ToolbarButton>
+						<ToolbarButton
 							className="components-tab-button"
 							isPressed={ isPreview }
 							onClick={ this.switchToPreview }
 						>
 							<span>{ __( 'Preview' ) }</span>
-						</Button>
+						</ToolbarButton>
 					</ToolbarGroup>
 				</BlockControls>
 				<Disabled.Consumer>
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 7ab328b6ea435d..587a41984f0829 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
@@ -84,4 +84,11 @@ describe( 'Toolbar roving tabindex', () => {
 		await wrapCurrentBlockWithGroup();
 		await testGroupKeyboardNavigation( 'Block: Image' );
 	} );
+
+	it( 'ensures custom html block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'Custom HTML' );
+		await testBlockToolbarKeyboardNavigation( 'Block: Custom HTML' );
+		await wrapCurrentBlockWithGroup();
+		await testGroupKeyboardNavigation( 'Block: Custom HTML' );
+	} );
 } );