Try suggested changes to TokenInput

packages/components/src/form-token-field/token-input.tsx

@@ -2,12 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { ChangeEvent, ForwardedRef } from 'react';
+import type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,9 +26,13 @@ export function UnForwardedTokenInput(
 		selectedSuggestionIndex,
 		className,
 		onChange,
+		onFocus,
+		onBlur,
 		...restProps
 	} = props;
 
+	const [ hasFocus, setHasFocus ] = useState( false );
+
 	const size = value ? value.length + 1 : 0;
 
 	const onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {
@@ -39,6 +43,18 @@ export function UnForwardedTokenInput(
 		}
 	};
 
+	const onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {
+		setHasFocus( true );
+		onFocus?.( e );
+	};
+
+	const onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (
+		e
+	) => {
+		setHasFocus( false );
+		onBlur?.( e );
+	};
+
 	return (
 		<input
 			ref={ ref }
@@ -47,6 +63,8 @@ export function UnForwardedTokenInput(
 			{ ...restProps }
 			value={ value || '' }
 			onChange={ onChangeHandler }
+			onFocus={ onFocusHandler }
+			onBlur={ onBlurHandler }
 			size={ size }
 			className={ classnames(
 				className,
@@ -62,7 +80,11 @@ export function UnForwardedTokenInput(
 					: undefined
 			}
 			aria-activedescendant={
-				selectedSuggestionIndex !== -1
+				// Only add the `aria-activedescendant` attribute when:
+				// - the user is actively interacting with the input (`hasFocus`)
+				// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)
+				// - the list of suggestions are rendered in the DOM (`isExpanded`)
+				hasFocus && selectedSuggestionIndex !== -1 && isExpanded
 					? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
 					: undefined
 			}