Implement roving tabindex on the Custom HTML block toolbar (#23277)

WordPress · Jun 18, 2020 · 0f55499 · 0f55499
1 parent 75176cd
commit 0f55499
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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' );
+	} );
 } );