add basic keyboard support

packages/block-editor/src/components/list-view/block.js

@@ -46,6 +46,7 @@ export default function ListViewBlock( {
 	path,
 	isExpanded,
 	style,
+	isFocused = false,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -83,9 +84,10 @@ export default function ListViewBlock( {
 	// try to steal the focus from the editor canvas.
 	useEffect( () => {
 		if (
-			withExperimentalPersistentListViewFeatures &&
-			! isTreeGridMounted &&
-			isSelected
+			( withExperimentalPersistentListViewFeatures &&
+				! isTreeGridMounted &&
+				isSelected ) ||
+			isFocused
 		) {
 			cellRef.current.focus();
 		}

packages/block-editor/src/components/list-view/branch.js

@@ -84,7 +84,7 @@ export default function ListViewBranch( props ) {
 				expandedState
 			);
 		}
-		const { start, maxVisible } = windowMeasurement;
+		const { start, maxVisible, focus } = windowMeasurement;
 		const end = start + maxVisible;
 
 		// Only use windowing for the persistent list view
@@ -111,6 +111,10 @@ export default function ListViewBranch( props ) {
 				  }
 				: {} ),
 		};
+		const isFocused =
+			__experimentalPersistentListViewFeatures &&
+			( ( start === nextPosition && focus === 'start' ) ||
+				( end === nextPosition && focus === 'end' ) );
 
 		const position = index + 1;
 		const isLastRowAtLevel = rowCount === position;
@@ -177,6 +181,7 @@ export default function ListViewBranch( props ) {
 						isExpanded={ isExpanded }
 						listPosition={ nextPosition }
 						style={ style }
+						isFocused={ isFocused }
 					/>
 				) }
 				{ hasNestedBranch && isExpanded && ! isDragged && (

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

@@ -33,6 +33,8 @@ function measureWindow( scrollContainer, setWindowMeasurement ) {
 	setWindowMeasurement( {
 		maxVisible: maxVisible + WINDOW_OVERSCAN,
 		start,
+		end: start + maxVisible,
+		focus: null,
 	} );
 }
 
@@ -119,6 +121,7 @@ function ListView(
 	const [ windowMeasurement, setWindowMeasurement ] = useState( {
 		maxVisible: 30,
 		start: 0,
+		end: 30,
 	} );
 
 	useLayoutEffect( () => {
@@ -172,6 +175,35 @@ function ListView(
 		collapse( row?.dataset?.block );
 	};
 
+	const moveWindowUp = () => {
+		setWindowMeasurement( ( lastMeasurement ) => {
+			const { start, maxVisible } = lastMeasurement;
+			const nextStart = Math.max( 0, start - 1 );
+			return {
+				start: nextStart,
+				maxVisible,
+				end: nextStart + maxVisible,
+				focus: 'start',
+			};
+		} );
+	};
+
+	const moveWindowDown = () => {
+		setWindowMeasurement( ( lastMeasurement ) => {
+			const { start, maxVisible } = lastMeasurement;
+			const nextStart = Math.min(
+				start + 1,
+				globalBlockCount - maxVisible
+			);
+			return {
+				start: nextStart,
+				maxVisible,
+				end: nextStart + maxVisible,
+				focus: 'end',
+			};
+		} );
+	};
+
 	const contextValue = useMemo(
 		() => ( {
 			__experimentalFeatures,
@@ -206,6 +238,8 @@ function ListView(
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
+				moveWindowUp={ moveWindowUp }
+				moveWindowDown={ moveWindowDown }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

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

@@ -39,14 +39,23 @@ function getRowFocusables( rowElement ) {
  * Renders both a table and tbody element, used to create a tree hierarchy.
  *
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md
- * @param {Object}    props               Component props.
- * @param {WPElement} props.children      Children to be rendered.
- * @param {Function}  props.onExpandRow   Callback to fire when row is expanded.
- * @param {Function}  props.onCollapseRow Callback to fire when row is collapsed.
- * @param {Object}    ref                 A ref to the underlying DOM table element.
+ * @param {Object}    props                Component props.
+ * @param {WPElement} props.children       Children to be rendered.
+ * @param {Function}  props.onExpandRow    Callback to fire when row is expanded.
+ * @param {Function}  props.onCollapseRow  Callback to fire when row is collapsed.
+ * @param {Function}  props.moveWindowUp   Callback to fire when pressing up at the top window row
+ * @param {Function}  props.moveWindowDown Callback to fire when pressing down at the bottom window row
+ * @param {Object}    ref                  A ref to the underlying DOM table element.
  */
 function TreeGrid(
-	{ children, onExpandRow = () => {}, onCollapseRow = () => {}, ...props },
+	{
+		children,
+		onExpandRow = () => {},
+		onCollapseRow = () => {},
+		moveWindowUp = () => {},
+		moveWindowDown = () => {},
+		...props
+	},
 	ref
 ) {
 	const onKeyDown = useCallback( ( event ) => {
@@ -155,8 +164,14 @@ function TreeGrid(
 				nextRowIndex = Math.min( currentRowIndex + 1, rows.length - 1 );
 			}
 
-			// Focus is either at the top or bottom edge of the grid. Do nothing.
+			// Focus is either at the top or bottom edge of the grid. Notify callbacks if tree is using windowing,
+			// otherwise do nothing.
 			if ( nextRowIndex === currentRowIndex ) {
+				if ( keyCode === UP ) {
+					moveWindowUp();
+				} else {
+					moveWindowDown();
+				}
 				// Prevent key use for anything else. For example, Voiceover
 				// will start navigating horizontally when reaching the vertical
 				// bounds of a table.