fix: preventing Talkback erroneously focusing valid icon and adding similar support for MobileCombobox (#8435)

* preventing talkback from focusing valid icon and adding to mobile combobox

* update string, match some logic from #8329

Author: LFDanLu

packages/@react-spectrum/combobox/intl/en-US.json

@@ -2,5 +2,7 @@
   "loading": "Loading...",
   "noResults": "No results",
   "clear": "Clear",
-  "invalid": "(invalid)"
+  "invalid": "(invalid)",
+  "valid": "(valid)"
+
 }

packages/@react-spectrum/combobox/src/MobileComboBox.tsx

@@ -179,9 +179,10 @@ export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: Co
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');
   let valueId = useId();
   let invalidId = useId();
+  let validId = useId();
   let validationIcon = validationState === 'invalid'
     ? <AlertMedium id={invalidId} aria-label={stringFormatter.format('invalid')} />
-    : <CheckmarkMedium />;
+    : <CheckmarkMedium id={validId} aria-label={stringFormatter.format('valid')} />;
 
   let validation = React.cloneElement(validationIcon, {
     UNSAFE_className: classNames(
@@ -202,7 +203,8 @@ export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: Co
       props['aria-labelledby'],
       props['aria-label'] && !props['aria-labelledby'] ? props.id : null,
       valueId,
-      validationState === 'invalid' ? invalidId : null
+      validationState === 'invalid' ? invalidId : null,
+      validationState === 'valid' ? validId : null
     ].filter(Boolean).join(' '),
     elementType: 'div'
   }, objRef);

packages/@react-spectrum/textfield/src/TextFieldBase.tsx

@@ -98,7 +98,7 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldB
   let validId = useId();
   let validationIcon = isInvalid
     ? <AlertMedium />
-    : <CheckmarkMedium id={validId} aria-label={stringFormatter.format('valid')} />;
+    : <CheckmarkMedium id={validId} aria-hidden aria-label={stringFormatter.format('valid')} />;
   let validation = cloneElement(validationIcon, {
     UNSAFE_className: classNames(
       styles,
@@ -107,6 +107,15 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldB
     )
   });
 
+  // Add validation icon IDREF to aria-describedby when validationState is valid
+  let inputPropsAriaDescribedBy = inputProps['aria-describedby'];
+  if (
+    !isInvalid && validationState === 'valid' && !isLoading && !isDisabled &&
+    (!inputPropsAriaDescribedBy || !inputPropsAriaDescribedBy.includes(validId))
+  ) {
+    inputProps['aria-describedby'] = [inputPropsAriaDescribedBy, validId].join(' ').trim();
+  }
+
   let {focusProps, isFocusVisible} = useFocusRing({
     isTextInput: true,
     autoFocus
@@ -129,18 +138,7 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldB
         )
       }>
       <ElementType
-        {...mergeProps(
-            inputProps,
-            hoverProps,
-            focusProps,
-            validationState === 'valid' && !isLoading && !isDisabled
-              ? {
-                'aria-describedby': inputProps['aria-describedby']
-                    ? `${inputProps['aria-describedby']} ${validId}`
-                    : validId
-              }
-              : undefined
-          )}
+        {...mergeProps(inputProps, hoverProps, focusProps)}
         ref={inputRef as any}
         rows={multiLine ? 1 : undefined}
         className={