Use composite pattern to improve keyboard navigation on the inserter (#…

…23610) Co-authored-by: Haz <[email protected]>
WordPress · Jul 15, 2020 · d8c7146 · d8c7146
1 parent 4ae9ab1
commit d8c7146
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -62,6 +62,7 @@
 		"react-autosize-textarea": "^3.0.2",
 		"react-spring": "^8.0.19",
 		"react-transition-group": "^2.9.0",
+		"reakit": "1.1.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0",

diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
@@ -1,7 +1,13 @@
+/**
+ * External dependencies
+ */
+import { Composite, useCompositeState } from 'reakit';
+
 /**
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,16 +20,32 @@ function BlockTypesList( {
 	onSelect,
 	onHover = () => {},
 	children,
+	label,
 } ) {
+	const composite = useCompositeState();
 	const normalizedItems = includeVariationsInInserterItems( items );
+	const orderId = normalizedItems.reduce(
+		( acc, item ) => acc + '--' + item.id,
+		''
+	);
+
+	// This ensures the composite state refreshes when the list order changes.
+	useEffect( () => {
+		composite.unstable_sort();
+	}, [ composite.unstable_sort, orderId ] );
 
 	return (
 		/*
 		 * Disable reason: The `list` ARIA role is redundant but
 		 * Safari+VoiceOver won't announce the list otherwise.
 		 */
 		/* eslint-disable jsx-a11y/no-redundant-roles */
-		<ul role="list" className="block-editor-block-types-list">
+		<Composite
+			{ ...composite }
+			role="listbox"
+			className="block-editor-block-types-list"
+			aria-label={ label }
+		>
 			{ normalizedItems.map( ( item ) => {
 				return (
 					<InserterListItem
@@ -40,11 +62,12 @@ function BlockTypesList( {
 						onBlur={ () => onHover( null ) }
 						isDisabled={ item.isDisabled }
 						title={ item.title }
+						composite={ composite }
 					/>
 				);
 			} ) }
 			{ children }
-		</ul>
+		</Composite>
 		/* eslint-enable jsx-a11y/no-redundant-roles */
 	);
 }

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { CompositeItem } from 'reakit';
 
 /**
  * WordPress dependencies
@@ -19,6 +20,7 @@ function InserterListItem( {
 	isDisabled,
 	title,
 	className,
+	composite,
 	...props
 } ) {
 	const itemIconStyle = icon
@@ -29,8 +31,11 @@ function InserterListItem( {
 		: {};
 
 	return (
-		<li className="block-editor-block-types-list__list-item">
-			<Button
+		<div className="block-editor-block-types-list__list-item">
+			<CompositeItem
+				role="option"
+				as={ Button }
+				{ ...composite }
 				className={ classnames(
 					'block-editor-block-types-list__item',
 					className
@@ -51,8 +56,8 @@ function InserterListItem( {
 				<span className="block-editor-block-types-list__item-title">
 					{ title }
 				</span>
-			</Button>
-		</li>
+			</CompositeItem>
+		</div>
 	);
 }
 

diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -132,6 +132,7 @@ export function BlockTypesTab( {
 						items={ filteredItems }
 						onSelect={ onSelectItem }
 						onHover={ onHover }
+						label={ __( 'Child Blocks' ) }
 					/>
 				</ChildBlocks>
 			) }
@@ -145,6 +146,7 @@ export function BlockTypesTab( {
 							items={ suggestedItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
+							label={ _x( 'Most used', 'blocks' ) }
 						/>
 					</InserterPanel>
 				) }
@@ -165,6 +167,7 @@ export function BlockTypesTab( {
 								items={ categoryItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
+								label={ category.title }
 							/>
 						</InserterPanel>
 					);
@@ -179,6 +182,7 @@ export function BlockTypesTab( {
 						items={ uncategorizedItems }
 						onSelect={ onSelectItem }
 						onHover={ onHover }
+						label={ __( 'Uncategorized' ) }
 					/>
 				</InserterPanel>
 			) }
@@ -200,6 +204,7 @@ export function BlockTypesTab( {
 								items={ collectionItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
+								label={ collection.title }
 							/>
 						</InserterPanel>
 					);

diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js
@@ -79,6 +79,7 @@ function QuickInserterList( {
 						items={ shownBlockTypes }
 						onSelect={ onSelectBlockType }
 						onHover={ onHover }
+						label={ __( 'Blocks' ) }
 					/>
 				</InserterPanel>
 			) }

diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
@@ -67,6 +67,11 @@ function ReusableBlocksList( {
 				items={ filteredItems }
 				onSelect={ onSelectItem }
 				onHover={ onHover }
+				label={
+					filterValue
+						? __( 'Search Results' )
+						: __( 'Reusable blocks' )
+				}
 			/>
 		</InserterPanel>
 	);

diff --git a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
@@ -158,7 +158,6 @@ describe( 'adding blocks', () => {
 
 		// Tab to the block list
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 
 		// Expect the block list to be the active element.
 		activeElementClassList = await page.evaluate(