Autocomplete: Fix Voiceover not announcing suggestions (#54902)

* Add a function to return a text-only label. * Use already defined isAppleOS function from keycodes. Remove new OS functions from element. * Add fallback if textLabel is unavailable. * Try combobox role to get around annoying re-rendering type effect. * Changelog entry. * Revert Windows fix, too much scope creep. * Fix Changelog. * Remove diff artifact. * Remove mistaken files. * Add comment linking to PR. * Revert textLabel prop. # Conflicts: # packages/components/CHANGELOG.md
WordPress · Nov 9, 2023 · f2dea97 · f2dea97
1 parent 223efb0
commit f2dea97
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 8 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### Bug Fix
 
+-   `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)).
 -   `Placeholder`: Improved DOM structure and screen reader announcements ([#45801](https://github.com/WordPress/gutenberg/pull/45801)).
 -   `DateTimePicker`: fix onChange callback check so that it also works inside iframes ([#54669](https://github.com/WordPress/gutenberg/pull/54669)).
 -   `Popover`: Apply the CSS in JS styles properly for components used within popovers. ([#54912](https://github.com/WordPress/gutenberg/pull/54912))

diff --git a/packages/components/src/autocomplete/index.tsx b/packages/components/src/autocomplete/index.tsx
@@ -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 EMPTY_FILTERED_OPTIONS: KeyedOption[] = [];
 
 export function useAutocomplete( {
@@ -163,20 +194,35 @@ export function useAutocomplete( {
 		) {
 			return;
 		}
+
 		switch ( event.key ) {
-			case 'ArrowUp':
-				setSelectedIndex(
+			case 'ArrowUp': {
+				const newIndex =
 					( selectedIndex === 0
 						? filteredOptions.length
-						: selectedIndex ) - 1
-				);
+						: selectedIndex ) - 1;
+				setSelectedIndex( newIndex );
+				// See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902.
+				if ( isAppleOS() ) {
+					speak(
+						getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
 				break;
+			}
 
-			case 'ArrowDown':
-				setSelectedIndex(
-					( selectedIndex + 1 ) % filteredOptions.length
-				);
+			case 'ArrowDown': {
+				const newIndex = ( selectedIndex + 1 ) % filteredOptions.length;
+				setSelectedIndex( newIndex );
+				if ( isAppleOS() ) {
+					speak(
+						getNodeText( filteredOptions[ newIndex ].label ),
+						'assertive'
+					);
+				}
 				break;
+			}
 
 			case 'Escape':
 				setAutocompleter( null );