Announce (via speak) when block inserted in Navigation list view (#47034

)

* Announce when block inserted in list view

* Announce insert via callback

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

@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useState, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -15,6 +16,8 @@ import Inserter from '../inserter';
 
 export const Appender = forwardRef(
 	( { nestingLevel, blockCount, ...props }, ref ) => {
+		const [ insertedBlock, setInsertedBlock ] = useState( null );
+
 		const instanceId = useInstanceId( Appender );
 		const { hideInserter, clientId } = useSelect( ( select ) => {
 			const {
@@ -38,6 +41,26 @@ export const Appender = forwardRef(
 			context: 'list-view',
 		} );
 
+		const insertedBlockTitle = useBlockDisplayTitle( {
+			clientId: insertedBlock?.clientId,
+			context: 'list-view',
+		} );
+
+		useEffect( () => {
+			if ( ! insertedBlockTitle?.length ) {
+				return;
+			}
+
+			speak(
+				sprintf(
+					// translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
+					__( '%s block inserted' ),
+					insertedBlockTitle
+				),
+				'assertive'
+			);
+		}, [ insertedBlockTitle ] );
+
 		if ( hideInserter ) {
 			return null;
 		}
@@ -63,6 +86,11 @@ export const Appender = forwardRef(
 					__experimentalIsQuick
 					{ ...props }
 					toggleProps={ { 'aria-describedby': descriptionId } }
+					onSelectOrClose={ ( maybeInsertedBlock ) => {
+						if ( maybeInsertedBlock?.clientId ) {
+							setInsertedBlock( maybeInsertedBlock );
+						}
+					} }
 				/>
 				<div
 					className="offcanvas-editor-appender__description"