Improve block inserter keyboard navigation

packages/block-editor/package.json

@@ -60,7 +60,7 @@
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-spring": "^8.0.19",
-		"reakit": "1.1.0",
+		"reakit": "1.3.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0",

packages/block-editor/src/components/block-types-list/index.js

@@ -1,18 +1,21 @@
-/**
- * External dependencies
- */
-import { Composite, useCompositeState } from 'reakit';
-
 /**
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import InserterListItem from '../inserter-list-item';
+import { InserterListboxGroup, InserterListboxRow } from '../inserter-listbox';
+
+function chunk( array, size ) {
+	const chunks = [];
+	for ( let i = 0, j = array.length; i < j; i += size ) {
+		chunks.push( array.slice( i, i + size ) );
+	}
+	return chunks;
+}
 
 function BlockTypesList( {
 	items = [],
@@ -21,49 +24,37 @@ function BlockTypesList( {
 	children,
 	label,
 } ) {
-	const composite = useCompositeState();
-	const orderId = items.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 */
-		<Composite
-			{ ...composite }
-			role="listbox"
+		<InserterListboxGroup
 			className="block-editor-block-types-list"
 			aria-label={ label }
 		>
-			{ items.map( ( item ) => {
-				return (
-					<InserterListItem
-						key={ item.id }
-						className={ getBlockMenuDefaultClassName( item.id ) }
-						icon={ item.icon }
-						onClick={ () => {
-							onSelect( item );
-							onHover( null );
-						} }
-						onFocus={ () => onHover( item ) }
-						onMouseEnter={ () => onHover( item ) }
-						onMouseLeave={ () => onHover( null ) }
-						onBlur={ () => onHover( null ) }
-						isDisabled={ item.isDisabled }
-						title={ item.title }
-						composite={ composite }
-					/>
-				);
-			} ) }
+			{ chunk( items, 3 ).map( ( row, i ) => (
+				<InserterListboxRow key={ i } role="presentation">
+					{ row.map( ( item, j ) => (
+						<InserterListItem
+							key={ item.id }
+							className={ getBlockMenuDefaultClassName(
+								item.id
+							) }
+							icon={ item.icon }
+							onClick={ () => {
+								onSelect( item );
+								onHover( null );
+							} }
+							onFocus={ () => onHover( item ) }
+							onMouseEnter={ () => onHover( item ) }
+							onMouseLeave={ () => onHover( null ) }
+							onBlur={ () => onHover( null ) }
+							isDisabled={ item.isDisabled }
+							title={ item.title }
+							isFirst={ i + j === 0 }
+						/>
+					) ) }
+				</InserterListboxRow>
+			) ) }
 			{ children }
-		</Composite>
-		/* eslint-enable jsx-a11y/no-redundant-roles */
+		</InserterListboxGroup>
 	);
 }
 

packages/block-editor/src/components/block-types-list/style.scss

@@ -1,5 +1,4 @@
-.block-editor-block-types-list {
-	list-style: none;
+.block-editor-block-types-list > * {
 	padding: 4px;
 	margin-left: -4px;
 	margin-right: -4px;

packages/block-editor/src/components/inserter-list-item/index.js

@@ -2,25 +2,20 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { CompositeItem } from 'reakit';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import { InserterListboxItem } from '../inserter-listbox';
 
 function InserterListItem( {
 	icon,
 	onClick,
 	isDisabled,
 	title,
 	className,
-	composite,
+	isFirst,
 	...props
 } ) {
 	const itemIconStyle = icon
@@ -31,11 +26,11 @@ function InserterListItem( {
 		: {};
 
 	return (
-		<div className="block-editor-block-types-list__list-item">
-			<CompositeItem
-				role="option"
-				as={ Button }
-				{ ...composite }
+		<div
+			className="block-editor-block-types-list__list-item"
+			role="presentation"
+		>
+			<InserterListboxItem
 				className={ classnames(
 					'block-editor-block-types-list__item',
 					className
@@ -45,6 +40,7 @@ function InserterListItem( {
 					onClick();
 				} }
 				disabled={ isDisabled }
+				isFirst={ isFirst }
 				{ ...props }
 			>
 				<span
@@ -56,7 +52,7 @@ function InserterListItem( {
 				<span className="block-editor-block-types-list__item-title">
 					{ title }
 				</span>
-			</CompositeItem>
+			</InserterListboxItem>
 		</div>
 	);
 }

packages/block-editor/src/components/inserter-listbox/context.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const InserterListboxContext = createContext();
+
+export default InserterListboxContext;

packages/block-editor/src/components/inserter-listbox/group.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function InserterListboxGroup( props, ref ) {
+	return (
+		<div
+			role="listbox"
+			aria-orientation="horizontal"
+			{ ...props }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( InserterListboxGroup );

packages/block-editor/src/components/inserter-listbox/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { useCompositeState } from 'reakit/Composite';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InserterListboxContext from './context';
+
+export { default as InserterListboxGroup } from './group';
+export { default as InserterListboxRow } from './row';
+export { default as InserterListboxItem } from './item';
+
+function InserterListbox( props, ref ) {
+	const compositeState = useCompositeState( {
+		shift: true,
+		wrap: 'horizontal',
+	} );
+	return (
+		<InserterListboxContext.Provider value={ compositeState }>
+			<div { ...props } ref={ ref } />
+		</InserterListboxContext.Provider>
+	);
+}
+
+export default forwardRef( InserterListbox );

packages/block-editor/src/components/inserter-listbox/item.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { CompositeItem } from 'reakit/Composite';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InserterListboxContext from './context';
+
+function InserterListboxItem(
+	{ isFirst, as: Component, children, ...props },
+	ref
+) {
+	const state = useContext( InserterListboxContext );
+	return (
+		<CompositeItem state={ state } role="option" ref={ ref } { ...props }>
+			{ ( htmlProps ) => {
+				const propsWithTabIndex = {
+					...htmlProps,
+					tabIndex: isFirst ? 0 : htmlProps.tabIndex,
+				};
+				if ( Component ) {
+					return (
+						<Component { ...propsWithTabIndex }>
+							{ children }
+						</Component>
+					);
+				}
+				if ( typeof children === 'function' ) {
+					return children( propsWithTabIndex );
+				}
+				return <Button { ...propsWithTabIndex }>{ children }</Button>;
+			} }
+		</CompositeItem>
+	);
+}
+
+export default forwardRef( InserterListboxItem );

packages/block-editor/src/components/inserter-listbox/row.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { CompositeGroup } from 'reakit/Composite';
+
+/**
+ * Internal dependencies
+ */
+import InserterListboxContext from './context';
+
+function InserterListboxRow( props, ref ) {
+	const state = useContext( InserterListboxContext );
+	return (
+		<CompositeGroup
+			state={ state }
+			role="presentation"
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+}
+
+export default forwardRef( InserterListboxRow );

packages/block-editor/src/components/inserter/block-types-tab.js

@@ -18,6 +18,7 @@ import BlockTypesList from '../block-types-list';
 import ChildBlocks from './child-blocks';
 import InserterPanel from './panel';
 import useBlockTypesState from './hooks/use-block-types-state';
+import InserterListbox from '../inserter-listbox';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -93,7 +94,7 @@ export function BlockTypesTab( {
 	useEffect( () => () => onHover( null ), [] );
 
 	return (
-		<div>
+		<InserterListbox>
 			{ hasChildItems && (
 				<ChildBlocks rootClientId={ rootClientId }>
 					<BlockTypesList
@@ -179,7 +180,7 @@ export function BlockTypesTab( {
 						</InserterPanel>
 					);
 				} ) }
-		</div>
+		</InserterListbox>
 	);
 }
 

packages/block-library/package.json

@@ -61,7 +61,7 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"react-easy-crop": "^3.0.0",
-		"reakit": "1.1.0",
+		"reakit": "1.3.0",
 		"tinycolor2": "^1.4.1"
 	},
 	"publishConfig": {

packages/components/package.json

@@ -58,7 +58,7 @@
 		"react-resize-aware": "^3.0.1",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^7.0.15",
-		"reakit": "^1.1.0",
+		"reakit": "^1.3.0",
 		"rememo": "^3.0.0",
 		"tinycolor2": "^1.4.1",
 		"uuid": "^8.3.0"

packages/edit-widgets/package.json

@@ -48,7 +48,7 @@
 		"@wordpress/url": "file:../url",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.19",
-		"reakit": "^1.1.0",
+		"reakit": "^1.3.0",
 		"rememo": "^3.0.0",
 		"uuid": "^8.3.0"
 	},