Replace RovingTabIndex with reakit composite

packages/block-editor/src/components/block-navigation/appender.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalTreeGridCell as TreeGridCell } from '@wordpress/components';
+import {
+	__experimentalTreeGridCell as TreeGridCell,
+	__experimentalTreeGridItem as TreeGridItem,
+} from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -41,27 +44,25 @@ export default function BlockNavigationAppender( {
 				className="block-editor-block-navigation-appender__cell"
 				colSpan="3"
 			>
-				{ ( props ) => (
-					<div className="block-editor-block-navigation-appender__container">
-						<DescenderLines
-							level={ level }
-							isLastRow={ position === rowCount }
-							terminatedLevels={ terminatedLevels }
-						/>
-						<ButtonBlockAppender
-							rootClientId={ parentBlockClientId }
-							__experimentalSelectBlockOnInsert={ false }
-							aria-describedby={ descriptionId }
-							{ ...props }
-						/>
-						<div
-							className="block-editor-block-navigation-appender__description"
-							id={ descriptionId }
-						>
-							{ appenderPositionDescription }
-						</div>
+				<div className="block-editor-block-navigation-appender__container">
+					<DescenderLines
+						level={ level }
+						isLastRow={ position === rowCount }
+						terminatedLevels={ terminatedLevels }
+					/>
+					<TreeGridItem
+						as={ ButtonBlockAppender }
+						rootClientId={ parentBlockClientId }
+						__experimentalSelectBlockOnInsert={ false }
+						aria-describedby={ descriptionId }
+					/>
+					<div
+						className="block-editor-block-navigation-appender__description"
+						id={ descriptionId }
+					>
+						{ appenderPositionDescription }
 					</div>
-				) }
+				</div>
 			</TreeGridCell>
 		</BlockNavigationLeaf>
 	);

packages/block-editor/src/components/block-navigation/block-select-button.js

@@ -10,9 +10,12 @@ import {
 	__experimentalGetBlockLabel as getBlockLabel,
 	getBlockType,
 } from '@wordpress/blocks';
-import { Button, VisuallyHidden } from '@wordpress/components';
+import {
+	Button,
+	__experimentalTreeGridItem as TreeGridItem,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -21,20 +24,15 @@ import { __ } from '@wordpress/i18n';
 import BlockIcon from '../block-icon';
 import { getBlockPositionDescription } from './utils';
 
-function BlockNavigationBlockSelectButton(
-	{
-		className,
-		block,
-		isSelected,
-		onClick,
-		position,
-		siblingCount,
-		level,
-		tabIndex,
-		onFocus,
-	},
-	ref
-) {
+export default function BlockNavigationBlockSelectButton( {
+	className,
+	block,
+	isSelected,
+	onClick,
+	position,
+	siblingCount,
+	level,
+} ) {
 	const { name, attributes } = block;
 
 	const blockType = getBlockType( name );
@@ -49,16 +47,14 @@ function BlockNavigationBlockSelectButton(
 
 	return (
 		<>
-			<Button
+			<TreeGridItem
+				as={ Button }
 				className={ classnames(
 					'block-editor-block-navigation-block-select-button',
 					className
 				) }
 				onClick={ onClick }
 				aria-describedby={ descriptionId }
-				ref={ ref }
-				tabIndex={ tabIndex }
-				onFocus={ onFocus }
 			>
 				<BlockIcon icon={ blockType.icon } showColors />
 				{ blockDisplayName }
@@ -67,7 +63,7 @@ function BlockNavigationBlockSelectButton(
 						{ __( '(selected block)' ) }
 					</VisuallyHidden>
 				) }
-			</Button>
+			</TreeGridItem>
 			<div
 				className="block-editor-block-navigation-block-select-button__description"
 				id={ descriptionId }
@@ -77,5 +73,3 @@ function BlockNavigationBlockSelectButton(
 		</>
 	);
 }
-
-export default forwardRef( BlockNavigationBlockSelectButton );

packages/block-editor/src/components/block-navigation/block-slot.js

@@ -9,12 +9,7 @@ import classnames from 'classnames';
 import { getBlockType } from '@wordpress/blocks';
 import { Fill, Slot, VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import {
-	Children,
-	cloneElement,
-	forwardRef,
-	useContext,
-} from '@wordpress/element';
+import { Children, cloneElement, useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -27,20 +22,15 @@ import { getBlockPositionDescription } from './utils';
 
 const getSlotName = ( clientId ) => `BlockNavigationBlock-${ clientId }`;
 
-function BlockNavigationBlockSlot( props, ref ) {
+export default function BlockNavigationBlockSlot( props ) {
 	const instanceId = useInstanceId( BlockNavigationBlockSlot );
 	const { clientId } = props.block;
 
 	return (
 		<Slot name={ getSlotName( clientId ) }>
 			{ ( fills ) => {
 				if ( ! fills.length ) {
-					return (
-						<BlockNavigationBlockSelectButton
-							ref={ ref }
-							{ ...props }
-						/>
-					);
+					return <BlockNavigationBlockSelectButton { ...props } />;
 				}
 
 				const {
@@ -50,8 +40,6 @@ function BlockNavigationBlockSlot( props, ref ) {
 					position,
 					siblingCount,
 					level,
-					tabIndex,
-					onFocus,
 				} = props;
 
 				const { name } = block;
@@ -64,11 +52,6 @@ function BlockNavigationBlockSlot( props, ref ) {
 				);
 
 				const forwardedFillProps = {
-					// Ensure that the component in the slot can receive
-					// keyboard navigation.
-					tabIndex,
-					onFocus,
-					ref,
 					// Give the element rendered in the slot a description
 					// that describes its position.
 					'aria-describedby': descriptionId,
@@ -108,8 +91,6 @@ function BlockNavigationBlockSlot( props, ref ) {
 	);
 }
 
-export default forwardRef( BlockNavigationBlockSlot );
-
 export const BlockNavigationBlockFill = ( props ) => {
 	const { clientId } = useContext( BlockListBlockContext );
 	return <Fill { ...props } name={ getSlotName( clientId ) } />;

packages/block-editor/src/components/block-navigation/block.js

@@ -6,9 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalTreeGridCell as TreeGridCell } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
+import {
+	__experimentalTreeGridCell as TreeGridCell,
+	__experimentalTreeGridItem as TreeGridItem,
+} from '@wordpress/components';
+
+import { forwardRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,6 +27,14 @@ import BlockNavigationBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
 import { useBlockNavigationContext } from './context';
 
+// Adapter component that makes `BlockSettingsDropdown` work with
+// `TreeGridItem` by forwarding its ref to the `toggleRef` prop.
+const BlockSettingsDropdownAdapter = forwardRef(
+	function BlockSettingsDropdownAdapter( props, ref ) {
+		return <BlockSettingsDropdown toggleRef={ ref } { ...props } />;
+	}
+);
+
 export default function BlockNavigationBlock( {
 	block,
 	onClick,
@@ -74,57 +86,48 @@ export default function BlockNavigationBlock( {
 				className="block-editor-block-navigation-block__contents-cell"
 				colSpan={ hasRenderedMovers ? undefined : 3 }
 			>
-				{ ( props ) => (
-					<div className="block-editor-block-navigation-block__contents-container">
-						<DescenderLines
-							level={ level }
-							isLastRow={ position === rowCount }
-							terminatedLevels={ terminatedLevels }
-						/>
-						<BlockNavigationBlockContents
-							block={ block }
-							onClick={ onClick }
-							isSelected={ isSelected }
-							position={ position }
-							siblingCount={ siblingCount }
-							level={ level }
-							{ ...props }
-						/>
-					</div>
-				) }
+				<div className="block-editor-block-navigation-block__contents-container">
+					<DescenderLines
+						level={ level }
+						isLastRow={ position === rowCount }
+						terminatedLevels={ terminatedLevels }
+					/>
+					<BlockNavigationBlockContents
+						block={ block }
+						onClick={ onClick }
+						isSelected={ isSelected }
+						position={ position }
+						siblingCount={ siblingCount }
+						level={ level }
+					/>
+				</div>
 			</TreeGridCell>
 			{ hasRenderedMovers && (
 				<>
 					<TreeGridCell className={ moverCellClassName }>
-						{ ( props ) => (
-							<BlockMoverUpButton
-								__experimentalOrientation="vertical"
-								clientIds={ [ clientId ] }
-								{ ...props }
-							/>
-						) }
+						<TreeGridItem
+							as={ BlockMoverUpButton }
+							__experimentalOrientation="vertical"
+							clientIds={ [ clientId ] }
+						/>
 					</TreeGridCell>
 					<TreeGridCell className={ moverCellClassName }>
-						{ ( props ) => (
-							<BlockMoverDownButton
-								__experimentalOrientation="vertical"
-								clientIds={ [ clientId ] }
-								{ ...props }
-							/>
-						) }
+						<TreeGridItem
+							as={ BlockMoverDownButton }
+							__experimentalOrientation="vertical"
+							clientIds={ [ clientId ] }
+						/>
 					</TreeGridCell>
 				</>
 			) }
 
 			{ withEllipsisMenu && level >= ellipsisMenuMinLevel && (
 				<TreeGridCell className={ ellipsisMenuClassName }>
-					{ ( props ) => (
-						<BlockSettingsDropdown
-							clientIds={ [ clientId ] }
-							icon={ moreVertical }
-							{ ...props }
-						/>
-					) }
+					<TreeGridItem
+						as={ BlockSettingsDropdownAdapter }
+						clientIds={ [ clientId ] }
+						icon={ moreVertical }
+					/>
 				</TreeGridCell>
 			) }
 		</BlockNavigationLeaf>

packages/components/src/dropdown-menu/index.js

@@ -46,6 +46,7 @@ function DropdownMenu( {
 	menuLabel,
 	position,
 	noIcons,
+	toggleRef,
 } ) {
 	if ( menuLabel ) {
 		deprecated( '`menuLabel` prop in `DropdownComponent`', {
@@ -124,6 +125,7 @@ function DropdownMenu( {
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						label={ label }
+						ref={ toggleRef }
 						showTooltip
 					>
 						{ mergedToggleProps.children }

packages/components/src/index.js

@@ -101,6 +101,8 @@ export {
 	default as __experimentalTreeGrid,
 	TreeGridRow as __experimentalTreeGridRow,
 	TreeGridCell as __experimentalTreeGridCell,
+	FocusableTreeGridCell as __experimentalFocusableTreeGridCell,
+	TreeGridItem as __experimentalTreeGridItem,
 } from './tree-grid';
 export { default as TreeSelect } from './tree-select';
 export { default as __experimentalUnitControl } from './unit-control';

packages/components/src/tree-grid/cell.js

@@ -1,12 +1,10 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import RovingTabIndexItem from './roving-tab-index-item';
+import { forwardRef } from '@wordpress/element';
 
-export default function TreeGridCell( { children, ...props } ) {
-	return (
-		<td { ...props } role="gridcell">
-			<RovingTabIndexItem>{ children }</RovingTabIndexItem>
-		</td>
-	);
+function TreeGridCell( props, ref ) {
+	return <td role="gridcell" ref={ ref } { ...props } />;
 }
+
+export default forwardRef( TreeGridCell );

packages/components/src/tree-grid/context.js

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