fix(a11y): improve web error announcements for BaseTextInput

Author: marufsharifi

src/components/FormHelpMessage.tsx

@@ -35,8 +35,8 @@ type FormHelpMessageProps = {
     /** Whether to show information icon */
     isInfo?: boolean;
 
-    /** Native ID applied to the message text when a direct text association is needed */
-    messageNativeID?: string;
+    /** Native ID for accessibility association (aria-describedby) */
+    nativeID?: string;
 };
 
 function FormHelpMessage({
@@ -47,16 +47,16 @@ function FormHelpMessage({
     shouldShowRedDotIndicator = true,
     shouldRenderMessageAsHTML = false,
     isInfo = false,
-    messageNativeID,
+    nativeID,
 }: FormHelpMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const icons = useMemoizedLazyExpensifyIcons(['DotIndicator', 'Exclamation']);
     const isWeb = getPlatform() === CONST.PLATFORM.WEB;
     const shouldAnnounceError = isError && typeof message === 'string' && !!message && !shouldRenderMessageAsHTML && children == null;
-    // Keep directly described form messages as plain text on web so Safari/VoiceOver
-    // can announce them when focus returns to the associated input.
-    const shouldUseAlertSemanticsOnVisibleMessage = shouldAnnounceError && (!isWeb || !messageNativeID);
+    const shouldUseSeparateWebLiveAnnouncement = isWeb && !!nativeID && shouldAnnounceError;
+    const visibleMessageRole = shouldUseSeparateWebLiveAnnouncement || !shouldAnnounceError ? undefined : CONST.ROLE.ALERT;
+    const visibleMessageLiveRegion = shouldUseSeparateWebLiveAnnouncement || !shouldAnnounceError ? undefined : 'assertive';
 
     const HTMLMessage = useMemo(() => {
         if (typeof message !== 'string' || !shouldRenderMessageAsHTML) {
@@ -109,16 +109,27 @@ function FormHelpMessage({
                     ) : (
                         <Text
                             style={[isError ? styles.formError : styles.formHelp, styles.mb0]}
-                            nativeID={messageNativeID}
-                            role={shouldUseAlertSemanticsOnVisibleMessage ? CONST.ROLE.ALERT : undefined}
+                            nativeID={nativeID}
+                            role={visibleMessageRole}
                             // TalkBack on some Android versions skips role-only alert announcements,
                             // so keep native accessibilityRole/live-region as a platform fallback.
                             accessibilityRole={!isWeb && shouldAnnounceError ? CONST.ROLE.ALERT : undefined}
-                            accessibilityLiveRegion={shouldUseAlertSemanticsOnVisibleMessage ? 'assertive' : undefined}
+                            accessibilityLiveRegion={visibleMessageLiveRegion}
                         >
                             {message}
                         </Text>
                     ))}
+                {shouldUseSeparateWebLiveAnnouncement && (
+                    // Keep a separate live region for immediate web announcements without
+                    // changing the visible described text Safari relies on when refocusing inputs.
+                    <Text
+                        style={styles.hiddenElementOutsideOfWindow}
+                        role={CONST.ROLE.ALERT}
+                        accessibilityLiveRegion="assertive"
+                    >
+                        {message}
+                    </Text>
+                )}
             </View>
         </View>
     );

src/components/TextInput/BaseTextInput/implementation/index.tsx

@@ -327,9 +327,8 @@ function BaseTextInput({
     // This is workaround for https://github.com/Expensify/App/issues/47939: in case when user is using Chrome on Android we set inputMode to 'search' to disable autocomplete bar above the keyboard.
     // If we need some other inputMode (eg. 'decimal'), then the autocomplete bar will show, but we can do nothing about it as it's a known Chrome bug.
     const inputMode = inputProps.inputMode ?? (isMobileChrome() ? 'search' : undefined);
-    const inputNativeID = inputProps.nativeID ?? inputProps.id ?? inputID ?? `text-input-${helpMessageId}`;
     const helpMessageTextID = `${helpMessageId}-text`;
-    const accessibilityLabel = inputProps.accessibilityLabel ?? [label, hint].filter(Boolean).join(', ');
+    const accessibilityLabel = [label, hint, errorText].filter(Boolean).join(', ');
     const loadingSpinnerReasonAttributes: SkeletonSpanReasonAttributes = {
         context: 'BaseTextInput.isLoading',
         isLoading: !!inputProps.isLoading,
@@ -389,7 +388,7 @@ function BaseTextInput({
                                     label={label}
                                     labelTranslateY={labelTranslateY}
                                     labelScale={labelScale}
-                                    for={inputNativeID}
+                                    for={inputProps.nativeID}
                                     isMultiline={isMultiline}
                                 />
                             </>
@@ -451,7 +450,6 @@ function BaseTextInput({
                                 }}
                                 // eslint-disable-next-line
                                 {...inputProps}
-                                nativeID={inputNativeID}
                                 // Filter out role="presentation" so it doesn't strip the native
                                 // semantics of the <input>. Other roles (e.g. searchbox) are preserved.
                                 role={role === CONST.ROLE.PRESENTATION ? undefined : role}
@@ -497,12 +495,9 @@ function BaseTextInput({
                                 readOnly={isReadOnly}
                                 defaultValue={defaultValue}
                                 markdownStyle={markdownStyle}
-                                accessibilityLabel={accessibilityLabel}
+                                accessibilityLabel={inputProps.accessibilityLabel ?? accessibilityLabel}
                                 keyboardType={inputProps.keyboardType}
-                                // Keep aria-describedby for baseline compatibility and issue requirements,
-                                // while aria-errormessage enhances announcement on browsers that support it.
                                 aria-describedby={inputHelpText ? helpMessageTextID : undefined}
-                                aria-errormessage={errorText ? helpMessageTextID : undefined}
                                 aria-invalid={errorText ? true : undefined}
                             />
                             {!!suffixCharacter && (
@@ -577,7 +572,7 @@ function BaseTextInput({
                 </PressableWithoutFeedback>
                 {!!inputHelpText && (
                     <FormHelpMessage
-                        messageNativeID={helpMessageTextID}
+                        nativeID={helpMessageTextID}
                         isError={!!errorText}
                         message={inputHelpText}
                     />