Use composite pattern to improve keyboard navigation on the inserter

WordPress · Jul 1, 2020 · e5bc4ec · e5bc4ec
1 parent cee8193
commit e5bc4ec
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 4 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
@@ -60,6 +60,7 @@
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^3.0.2",
 		"react-spring": "^8.0.19",
+		"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,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { Composite, useCompositeState } from 'reakit';
+
 /**
  * WordPress dependencies
  */
@@ -15,6 +20,7 @@ function BlockTypesList( {
 	onHover = () => {},
 	children,
 } ) {
+	const composite = useCompositeState();
 	const normalizedItems = includeVariationsInInserterItems( items );
 
 	return (
@@ -23,7 +29,12 @@ function BlockTypesList( {
 		 * 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
+			as="ul"
+			role="list"
+			{ ...composite }
+			className="block-editor-block-types-list"
+		>
 			{ normalizedItems.map( ( item ) => {
 				return (
 					<InserterListItem
@@ -40,11 +51,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
@@ -30,7 +32,9 @@ function InserterListItem( {
 
 	return (
 		<li className="block-editor-block-types-list__list-item">
-			<Button
+			<CompositeItem
+				as={ Button }
+				{ ...composite }
 				className={ classnames(
 					'block-editor-block-types-list__item',
 					className
@@ -51,7 +55,7 @@ function InserterListItem( {
 				<span className="block-editor-block-types-list__item-title">
 					{ title }
 				</span>
-			</Button>
+			</CompositeItem>
 		</li>
 	);
 }