Implement roving tabindex on the table block toolbar (#23252)

WordPress · Jun 18, 2020 · 8335c7c · 8335c7c
1 parent 6b26cab
commit 8335c7c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -25,6 +25,7 @@ import {
 	TextControl,
 	ToggleControl,
 	ToolbarGroup,
+	__experimentalToolbarItem as ToolbarItem,
 } from '@wordpress/components';
 import {
 	alignLeft,
@@ -597,12 +598,17 @@ export class TableEdit extends Component {
 			<>
 				<BlockControls>
 					<ToolbarGroup>
-						<DropdownMenu
-							hasArrowIndicator
-							icon={ table }
-							label={ __( 'Edit table' ) }
-							controls={ this.getTableControls() }
-						/>
+						<ToolbarItem>
+							{ ( toggleProps ) => (
+								<DropdownMenu
+									hasArrowIndicator
+									icon={ table }
+									toggleProps={ toggleProps }
+									label={ __( 'Edit table' ) }
+									controls={ this.getTableControls() }
+								/>
+							) }
+						</ToolbarItem>
 					</ToolbarGroup>
 					<AlignmentToolbar
 						label={ __( 'Change column alignment' ) }

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
@@ -85,6 +85,18 @@ describe( 'Toolbar roving tabindex', () => {
 		await testGroupKeyboardNavigation( 'Block: Image' );
 	} );
 
+	it( 'ensures table block toolbar uses roving tabindex', async () => {
+		await insertBlock( 'Table' );
+		await testBlockToolbarKeyboardNavigation( 'Block: Table' );
+		// Move focus to the first toolbar item
+		await page.keyboard.press( 'Home' );
+		await expectLabelToHaveFocus( 'Change block type or style' );
+		await page.click( '.blocks-table__placeholder-button' );
+		await testBlockToolbarKeyboardNavigation( 'Block: Table' );
+		await wrapCurrentBlockWithGroup();
+		await testGroupKeyboardNavigation( 'Block: Table' );
+	} );
+
 	it( 'ensures custom html block toolbar uses roving tabindex', async () => {
 		await insertBlock( 'Custom HTML' );
 		await testBlockToolbarKeyboardNavigation( 'Block: Custom HTML' );