Improve block inserter keyboard navigation

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

@@ -2,15 +2,20 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
-import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-} from '@wordpress/components';
 
 /**
  * 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 = [],
@@ -20,35 +25,30 @@ function BlockTypesList( {
 	label,
 	isDraggable = true,
 } ) {
-	const composite = useCompositeState();
 	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 }
-						item={ item }
-						className={ getBlockMenuDefaultClassName( item.id ) }
-						onSelect={ onSelect }
-						onHover={ onHover }
-						composite={ composite }
-						isDraggable={ isDraggable }
-					/>
-				);
-			} ) }
+			{ chunk( items, 3 ).map( ( row, i ) => (
+				<InserterListboxRow key={ i }>
+					{ row.map( ( item, j ) => (
+						<InserterListItem
+							key={ item.id }
+							item={ item }
+							className={ getBlockMenuDefaultClassName(
+								item.id
+							) }
+							onSelect={ onSelect }
+							onHover={ onHover }
+							isDraggable={ isDraggable }
+							isFirst={ i === 0 && 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 > [role="presentation"] {
 	padding: 4px;
 	margin-left: -4px;
 	margin-right: -4px;

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

@@ -7,10 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useMemo, useRef, memo } from '@wordpress/element';
-import {
-	Button,
-	__unstableCompositeItem as CompositeItem,
-} from '@wordpress/components';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
@@ -20,11 +16,12 @@ import {
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import { InserterListboxItem } from '../inserter-listbox';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 
 function InserterListItem( {
 	className,
-	composite,
+	isFirst,
 	item,
 	onSelect,
 	onHover,
@@ -72,10 +69,8 @@ function InserterListItem( {
 						}
 					} }
 				>
-					<CompositeItem
-						role="option"
-						as={ Button }
-						{ ...composite }
+					<InserterListboxItem
+						isFirst={ isFirst }
 						className={ classnames(
 							'block-editor-block-types-list__item',
 							className
@@ -100,10 +95,6 @@ function InserterListItem( {
 						} }
 						onMouseLeave={ () => onHover( null ) }
 						onBlur={ () => onHover( null ) }
-						// Use the CompositeItem `focusable` prop over Button's
-						// isFocusable. The latter was shown to cause an issue
-						// with tab order in the inserter list.
-						focusable
 						{ ...props }
 					>
 						<span
@@ -115,7 +106,7 @@ function InserterListItem( {
 						<span className="block-editor-block-types-list__item-title">
 							{ item.title }
 						</span>
-					</CompositeItem>
+					</InserterListboxItem>
 				</div>
 			) }
 		</InserterDraggableBlocks>

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,40 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
+
+function InserterListboxGroup( props, ref ) {
+	const [ shouldSpeak, setShouldSpeak ] = useState( false );
+
+	useEffect( () => {
+		if ( shouldSpeak ) {
+			speak(
+				__( 'Use left and right arrow keys to move through blocks' )
+			);
+		}
+	}, [ shouldSpeak ] );
+
+	return (
+		<div
+			ref={ ref }
+			role="listbox"
+			aria-orientation="horizontal"
+			onFocus={ () => {
+				setShouldSpeak( true );
+			} }
+			onBlur={ ( event ) => {
+				const focusingOutsideGroup = ! event.currentTarget.contains(
+					event.relatedTarget
+				);
+				if ( focusingOutsideGroup ) {
+					setShouldSpeak( false );
+				}
+			} }
+			{ ...props }
+		/>
+	);
+}
+
+export default forwardRef( InserterListboxGroup );

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
+
+/**
+ * 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( { children } ) {
+	const compositeState = useCompositeState( {
+		shift: true,
+		wrap: 'horizontal',
+	} );
+	return (
+		<InserterListboxContext.Provider value={ compositeState }>
+			{ children }
+		</InserterListboxContext.Provider>
+	);
+}
+
+export default InserterListbox;

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

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	__unstableCompositeItem as CompositeItem,
+} 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
+			ref={ ref }
+			state={ state }
+			role="option"
+			// Use the CompositeItem `focusable` prop over Button's
+			// isFocusable. The latter was shown to cause an issue
+			// with tab order in the inserter list.
+			focusable
+			{ ...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,24 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+import { __unstableCompositeGroup as CompositeGroup } from '@wordpress/components';
+
+/**
+ * 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 );