Navigation Block List View: Improve the accessible Name of the Tree G…

…rid inside the component. (#47031) * Improve accessible Name of the Navigation Offcanvas List View Update packages/block-library/src/navigation/edit/menu-inspector-controls.js Co-authored-by: Dave Smith <getdavemail@gmail.com> Update packages/block-library/src/navigation/edit/menu-inspector-controls.js Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com> switch to using a description rather than another label Update packages/block-library/src/navigation/edit/menu-inspector-controls.js Co-authored-by: Dave Smith <getdavemail@gmail.com> * Apply suggestions from code review * disable linting * fix linter --------- Co-authored-by: Ben Dwyer <ben@escruffian.com> Co-authored-by: Dave Smith <getdavemail@gmail.com>
WordPress · Feb 3, 2023 · 767b8dd · 767b8dd
1 parent 614eb86
commit 767b8dd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -60,10 +60,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {boolean} props.showBlockMovers Flag to enable block movers
  * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
+ * @param {string}  props.description         Optional accessible description for the tree grid component.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
-	{ id, blocks, showBlockMovers = false, isExpanded = false, LeafMoreMenu },
+	{
+		id,
+		blocks,
+		showBlockMovers = false,
+		isExpanded = false,
+		LeafMoreMenu,
+		description = __( 'Block navigation structure' ),
+	},
 	ref
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
@@ -208,7 +216,8 @@ function OffCanvasEditor(
 					onCollapseRow={ collapseRow }
 					onExpandRow={ expandRow }
 					onFocusRow={ focusRow }
-					applicationAriaLabel={ __( 'Block navigation structure' ) }
+					// eslint-disable-next-line jsx-a11y/aria-props
+					aria-description={ description }
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch

diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js
@@ -13,7 +13,7 @@ import {
 	Spinner,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -22,6 +22,7 @@ import NavigationMenuSelector from './navigation-menu-selector';
 import { LeafMoreMenu } from '../leaf-more-menu';
 import { unlock } from '../../experiments';
 import DeletedNavigationWarning from './deleted-navigation-warning';
+import useNavigationMenu from '../use-navigation-menu';
 
 /* translators: %s: The name of a menu. */
 const actionLabel = __( "Switch to '%s'" );
@@ -43,6 +44,7 @@ const MainContent = ( {
 		},
 		[ clientId ]
 	);
+	const { navigationMenu } = useNavigationMenu( currentMenuId );
 
 	if ( currentMenuId && isNavigationMenuMissing ) {
 		return <p>{ __( 'Select or create a menu' ) }</p>;
@@ -56,11 +58,21 @@ const MainContent = ( {
 		return <Spinner />;
 	}
 
+	const description = navigationMenu
+		? sprintf(
+				/* translators: %s: The name of a menu. */
+				__( 'Structure for navigation menu: %s' ),
+				navigationMenu?.title || __( 'Untitled menu' )
+		  )
+		: __(
+				'You have not yet created any menus. Displaying a list of your Pages'
+		  );
 	return (
 		<OffCanvasEditor
 			blocks={ clientIdsTree }
 			isExpanded={ true }
 			LeafMoreMenu={ LeafMoreMenu }
+			description={ description }
 		/>
 	);
 };