Autocomplete: Fix Voiceover not announcing suggestions

packages/block-editor/src/autocompleters/block.js

@@ -95,6 +95,7 @@ function createBlockCompleter() {
 						return {
 							key: `block-${ blockItem.id }`,
 							value: blockItem,
+							textLabel: title,
 							label: (
 								<>
 									<BlockIcon

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

packages/components/src/autocomplete/index.tsx

@@ -12,6 +12,7 @@ import {
 	useState,
 	useRef,
 	useMemo,
+	isAppleDevice,
 } from '@wordpress/element';
 import { __, _n } from '@wordpress/i18n';
 import { useInstanceId, useMergeRefs, useRefEffect } from '@wordpress/compose';
@@ -22,6 +23,7 @@ import {
 	isCollapsed,
 	getTextContent,
 } from '@wordpress/rich-text';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -163,19 +165,27 @@ 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 ( isAppleDevice() ) {
+					speak( filteredOptions[ newIndex ].textLabel, 'assertive' );
+				}
 				break;
 
 			case 'ArrowDown':
-				setSelectedIndex(
-					( selectedIndex + 1 ) % filteredOptions.length
-				);
+				newIndex = ( selectedIndex + 1 ) % filteredOptions.length;
+				setSelectedIndex( newIndex );
+				if ( isAppleDevice() ) {
+					speak( filteredOptions[ newIndex ].textLabel, 'assertive' );
+				}
 				break;
 
 			case 'Escape':

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,
 						} )

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

packages/element/README.md

@@ -268,6 +268,10 @@ _Changelog_
 
 `6.2.0` Introduced in WordPress core.
 
+### isAppleDevice
+
+Undocumented declaration.
+
 ### isEmptyElement
 
 Checks if the provided WP element is empty.
@@ -280,6 +284,22 @@ _Returns_
 
 -   `boolean`: True when an element is considered empty.
 
+### isIOS
+
+Undocumented declaration.
+
+### isIPad
+
+Undocumented declaration.
+
+### isIPhone
+
+Undocumented declaration.
+
+### isMac
+
+Undocumented declaration.
+
 ### isValidElement
 
 Checks if an object is a valid WPElement.

packages/element/src/index.js

@@ -3,5 +3,6 @@ export * from './react';
 export * from './react-platform';
 export * from './utils';
 export { default as Platform } from './platform';
+export * from './platform-os';
 export { default as renderToString } from './serialize';
 export { default as RawHTML } from './raw-html';

packages/element/src/platform-os.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+function testPlatform( re: RegExp ) {
+	return typeof window !== 'undefined' && window.navigator !== null
+		? re.test(
+				// eslint-disable-next-line dot-notation
+				window.navigator[ 'userAgentData' ]?.platform ||
+					window.navigator.platform
+		  )
+		: false;
+}
+
+export function isMac() {
+	return testPlatform( /^Mac/i );
+}
+
+export function isIPhone() {
+	return testPlatform( /^iPhone/i );
+}
+
+export function isIPad() {
+	return (
+		testPlatform( /^iPad/i ) ||
+		// iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+		( isMac() && navigator.maxTouchPoints > 1 )
+	);
+}
+
+export function isIOS() {
+	return isIPhone() || isIPad();
+}
+
+export function isAppleDevice() {
+	return isMac() || isIOS();
+}