Add accessible description of current Navigation block state

packages/block-library/src/navigation/edit/accessible-description.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { VisuallyHidden } from '@wordpress/components';
+
+export default function AccessibleDescription( { id, children } ) {
+	return (
+		<VisuallyHidden>
+			<div id={ id } className="wp-block-navigation__description">
+				{ children }
+			</div>
+		</VisuallyHidden>
+	);
+}

packages/block-library/src/navigation/edit/accessible-menu-description.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import AccessibleDescription from './accessible-description';
+
+export default function AccessibleMenuDescription( { id } ) {
+	const [ menuTitle ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
+	/* translators: %s: Title of a Navigation Menu post. */
+	const description = sprintf( __( `Navigation menu: "%s"` ), menuTitle );
+
+	return (
+		<AccessibleDescription id={ id }>{ description }</AccessibleDescription>
+	);
+}

packages/block-library/src/navigation/edit/index.js

@@ -69,6 +69,8 @@ import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
 import MenuInspectorControls from './menu-inspector-controls';
 import DeletedNavigationWarning from './deleted-navigation-warning';
+import AccessibleDescription from './accessible-description';
+import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
 
 function Navigation( {
@@ -665,12 +667,23 @@ function Navigation( {
 		</>
 	);
 
+	const accessibleDescriptionId = `${ clientId }-desc`;
+
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;
 
 	if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) {
 		return (
-			<TagName { ...blockProps }>
+			<TagName
+				{ ...blockProps }
+				aria-describedby={
+					! isPlaceholder ? accessibleDescriptionId : undefined
+				}
+			>
+				<AccessibleDescription id={ accessibleDescriptionId }>
+					{ __( 'Unsaved Navigation Menu.' ) }
+				</AccessibleDescription>
+
 				<MenuInspectorControls
 					clientId={ clientId }
 					createNavigationMenuIsSuccess={
@@ -836,7 +849,17 @@ function Navigation( {
 				) }
 
 				{ ! isLoading && (
-					<TagName { ...blockProps }>
+					<TagName
+						{ ...blockProps }
+						aria-describedby={
+							! isPlaceholder
+								? accessibleDescriptionId
+								: undefined
+						}
+					>
+						<AccessibleMenuDescription
+							id={ accessibleDescriptionId }
+						/>
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }