WordPress · alexstine · Oct 19, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 28, 2023
diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js
@@ -95,6 +95,7 @@ function createBlockCompleter() {
 						return {
 							key: `block-${ blockItem.id }`,
 							value: blockItem,
+							textLabel: title,
 							label: (
 								<>
 									<BlockIcon

@@ -19,6 +19,7 @@
 -   `SlotFill`: Pass `Component` instance to unregisterSlot ([#54765](https://github.com/WordPress/gutenberg/pull/54765)).
 -   `Button`: Remove `aria-selected` CSS selector from styling 'active' buttons ([#54931](https://github.com/WordPress/gutenberg/pull/54931)).
 -   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))
+-   `Autocomplete`: Add `aria-live` announcements for Mac and IOS Voiceover to fix lack of support for `aria-owns` ([#54902](https://github.com/WordPress/gutenberg/pull/54902)).
 
 ### Internal
 

diff --git a/packages/components/src/autocomplete/autocompleter-ui.tsx b/packages/components/src/autocomplete/autocompleter-ui.tsx
@@ -129,7 +129,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 		} ) => (
 			<Component
 				id={ listBoxId }
-				role="listbox"
+				role="combobox"
 				className="components-autocomplete__results"
 			>
 				{ items.map( ( option, index ) => (

diff --git a/packages/components/src/autocomplete/get-default-use-items.tsx b/packages/components/src/autocomplete/get-default-use-items.tsx
@@ -81,6 +81,10 @@ export default function getDefaultUseItems( autocompleter: WPCompleter ) {
 								label: autocompleter.getOptionLabel(
 									optionData
 								),
+								textLabel:
+									autocompleter.getOptionTextLabel(
+										optionData
+									),
 								keywords: autocompleter.getOptionKeywords
 									? autocompleter.getOptionKeywords(
 											optionData

@@ -22,6 +22,8 @@ import {
 	isCollapsed,
 	getTextContent,
 } from '@wordpress/rich-text';
+import { speak } from '@wordpress/a11y';
+import { isAppleOS } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -39,6 +41,35 @@ import type {
 	WPCompleter,
 } from './types';
 
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+			break;
+		case 'boolean':
+			return '';
+			break;
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			break;
+		}
+		default:
+			return '';
+	}
+
+	return '';
+};
-const getNodeText = ( node: React.ReactNode ): string => {
-	if ( node === null ) {
-		return '';
-	}
-
-	switch ( typeof node ) {
-		case 'string':
-		case 'number':
-			return node.toString();
-			break;
-		case 'boolean':
-			return '';
-			break;
-		case 'object': {
-			if ( node instanceof Array ) {
-				return node.map( getNodeText ).join( '' );
-			}
-			if ( 'props' in node ) {
-				return getNodeText( node.props.children );
-			}
-			break;
-		}
-		default:
-			return '';
-	}
-
-	return '';
-};
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			return '';
+		}
+		default:
+			return '';
+	}
+};
-const getNodeText = ( node: React.ReactNode ): string => {
-	if ( node === null ) {
-		return '';
-	}
-
-	switch ( typeof node ) {
-		case 'string':
-		case 'number':
-			return node.toString();
-			break;
-		case 'boolean':
-			return '';
-			break;
-		case 'object': {
-			if ( node instanceof Array ) {
-				return node.map( getNodeText ).join( '' );
-			}
-			if ( 'props' in node ) {
-				return getNodeText( node.props.children );
-			}
-			break;
-		}
-		default:
-			return '';
-	}
-
-	return '';
-};
+const getNodeText = ( node: React.ReactNode ): string => {
+	if ( node === null ) {
+		return '';
+	}
+
+	switch ( typeof node ) {
+		case 'string':
+		case 'number':
+			return node.toString();
+		case 'object': {
+			if ( node instanceof Array ) {
+				return node.map( getNodeText ).join( '' );
+			}
+			if ( 'props' in node ) {
+				return getNodeText( node.props.children );
+			}
+			return '';
+		}
+		default:
+			return '';
+	}
+};
+
 const EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
 export function useAutocomplete( {
@@ -163,19 +194,35 @@ export function useAutocomplete( {
 		) {
 			return;
 		}
+
+		let newIndex = 0;
+
 		switch ( event.key ) {
 			case 'ArrowUp':
-				setSelectedIndex(
+				newIndex =
 					( selectedIndex === 0
 						? filteredOptions.length
-						: selectedIndex ) - 1
-				);
+						: selectedIndex ) - 1;
+				setSelectedIndex( newIndex );
+				if ( isAppleOS() ) {
+					speak(
+						filteredOptions[ newIndex ].textLabel ||
+							getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
 				break;
 
 			case 'ArrowDown':
-				setSelectedIndex(
-					( selectedIndex + 1 ) % filteredOptions.length
-				);
+				newIndex = ( selectedIndex + 1 ) % filteredOptions.length;
+				setSelectedIndex( newIndex );
+				if ( isAppleOS() ) {
+					speak(
+						filteredOptions[ newIndex ].textLabel ||
+							getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
 				break;
 
 			case 'Escape':

diff --git a/packages/components/src/autocomplete/test/index.tsx b/packages/components/src/autocomplete/test/index.tsx
@@ -38,6 +38,9 @@ describe( 'AutocompleterUI', () => {
 						{ option.name }
 					</span>
 				),
+				getOptionTextLabel: ( option: FruitOption ) => {
+					return option.name;
+				},
 				// Mock useItems function to return a autocomplete item.
 				useItems: ( filterValue: string ) => {
 					const options = autocompleter.options;
@@ -46,6 +49,8 @@ describe( 'AutocompleterUI', () => {
 							key: `${ autocompleter.name }-${ optionIndex }`,
 							value: optionData,
 							label: autocompleter.getOptionLabel( optionData ),
+							textLabel:
+								autocompleter.getOptionTextLabel( optionData ),
 							keywords: [],
 							isDisabled: false,
 						} )

diff --git a/packages/components/src/autocomplete/types.ts b/packages/components/src/autocomplete/types.ts
@@ -25,6 +25,7 @@ export type KeyedOption = {
 	key: string;
 	value: any;
 	label: OptionLabel;
+	textLabel?: string;
 	keywords: Array< string >;
 	isDisabled: boolean;
 };
@@ -68,6 +69,11 @@ export type WPCompleter< TCompleterOption = any > = {
 	 * string or a mixed array of strings, elements, and components.
 	 */
 	getOptionLabel: ( option: TCompleterOption ) => OptionLabel;
+	/**
+	 * A function that returns the text label for a given option. A text label may be a
+	 * string only.
+	 */
+	getOptionTextLabel: ( option: TCompleterOption ) => string;
 	/**
 	 * A function that takes a Range before and a Range after the autocomplete
 	 * trigger and query text and returns a boolean indicating whether the