Navigation block: Fix some off canvas appender accessibility issues

packages/block-editor/src/components/off-canvas-editor/appender.js

@@ -1,48 +1,69 @@
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
 
-export const Appender = forwardRef( ( props, ref ) => {
-	const { hideInserter, clientId } = useSelect( ( select ) => {
-		const {
-			getTemplateLock,
-			__unstableGetEditorMode,
-			getSelectedBlockClientId,
-		} = select( blockEditorStore );
+export const Appender = forwardRef(
+	( { nestingLevel, blockCount, ...props }, ref ) => {
+		const instanceId = useInstanceId( Appender );
+		const { hideInserter, clientId } = useSelect( ( select ) => {
+			const {
+				getTemplateLock,
+				__unstableGetEditorMode,
+				getSelectedBlockClientId,
+			} = select( blockEditorStore );
 
-		const _clientId = getSelectedBlockClientId();
+			const _clientId = getSelectedBlockClientId();
 
-		return {
-			clientId: getSelectedBlockClientId(),
-			hideInserter:
-				!! getTemplateLock( _clientId ) ||
-				__unstableGetEditorMode() === 'zoom-out',
-		};
-	}, [] );
+			return {
+				clientId: getSelectedBlockClientId(),
+				hideInserter:
+					!! getTemplateLock( _clientId ) ||
+					__unstableGetEditorMode() === 'zoom-out',
+			};
+		}, [] );
 
-	if ( hideInserter ) {
-		return null;
-	}
+		if ( hideInserter ) {
+			return null;
+		}
 
-	return (
-		<div className="offcanvas-editor__appender">
-			<Inserter
-				ref={ ref }
-				rootClientId={ clientId }
-				position="bottom right"
-				isAppender={ true }
-				selectBlockOnInsert={ false }
-				shouldDirectInsert={ false }
-				__experimentalIsQuick
-				{ ...props }
-			/>
-		</div>
-	);
-} );
+		const descriptionId = `off-canvas-editor-appender__${ instanceId }`;
+		const description = sprintf(
+			/* translators: 1: The numerical position of the block. 2: The level of nesting for the block. */
+			__( 'Append at position %1$d, Level %2$d' ),
+			blockCount + 1,
+			nestingLevel
+		);
+
+		return (
+			<div className="offcanvas-editor-appender">
+				<Inserter
+					ref={ ref }
+					rootClientId={ clientId }
+					position="bottom right"
+					isAppender={ true }
+					selectBlockOnInsert={ false }
+					shouldDirectInsert={ false }
+					__experimentalIsQuick
+					{ ...props }
+					toggleProps={ { 'aria-describedby': descriptionId } }
+				/>
+				<div
+					className="offcanvas-editor-appender__description"
+					id={ descriptionId }
+				>
+					{ description }
+				</div>
+			</div>
+		);
+	}
+);

packages/block-editor/src/components/off-canvas-editor/branch.js

@@ -1,12 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
+import {
+	__experimentalTreeGridRow as TreeGridRow,
+	__experimentalTreeGridCell as TreeGridCell,
+} from '@wordpress/components';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+
+import { Appender } from './appender';
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
@@ -111,8 +117,14 @@ function ListViewBranch( props ) {
 		return null;
 	}
 
+	// Only show the appender at the first level.
+	const showAppender = level === 1;
+
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
+
+	// The appender means an extra row in List View, so add 1 to the row count.
+	const rowCount = showAppender ? blockCount + 1 : blockCount;
 	let nextPosition = listPosition;
 
 	return (
@@ -167,7 +179,7 @@ function ListViewBranch( props ) {
 								isDragged={ isDragged }
 								level={ level }
 								position={ position }
-								rowCount={ blockCount }
+								rowCount={ rowCount }
 								siblingBlockCount={ blockCount }
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
@@ -201,6 +213,24 @@ function ListViewBranch( props ) {
 					</AsyncModeProvider>
 				);
 			} ) }
+			{ showAppender && (
+				<TreeGridRow
+					level={ level }
+					setSize={ rowCount }
+					positionInSet={ rowCount }
+					isExpanded={ true }
+				>
+					<TreeGridCell>
+						{ ( treeGridCellProps ) => (
+							<Appender
+								nestingLevel={ level }
+								blockCount={ blockCount }
+								{ ...treeGridCellProps }
+							/>
+						) }
+					</TreeGridCell>
+				</TreeGridRow>
+			) }
 		</>
 	);
 }

packages/block-editor/src/components/off-canvas-editor/index.js

@@ -32,7 +32,6 @@ import useListViewClientIds from './use-list-view-client-ids';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
-import { Appender } from './appender';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -236,11 +235,6 @@ function __ExperimentalOffCanvasEditor(
 							positionInSet={ 1 }
 							isExpanded={ true }
 						>
-							<TreeGridCell>
-								{ ( treeGridCellProps ) => (
-									<Appender { ...treeGridCellProps } />
-								) }
-							</TreeGridCell>
 							{ ! clientIdsTree.length && (
 								<TreeGridCell withoutGridItem>
 									<div className="offcanvas-editor-list-view-is-empty">

packages/block-editor/src/components/off-canvas-editor/style.scss

@@ -1,4 +1,4 @@
-.offcanvas-editor__appender .block-editor-inserter__toggle {
+.offcanvas-editor-appender .block-editor-inserter__toggle {
 	background-color: #1e1e1e;
 	color: #fff;
 	margin: $grid-unit-10 0 0 24px;
@@ -14,6 +14,10 @@
 	}
 }
 
+.offcanvas-editor-appender__description {
+	display: none;
+}
+
 .offcanvas-editor-list-view-tree-wrapper {
 	max-width: 100%;
 	overflow-x: auto;