update string, match some logic from #8329

Author: LFDanLu

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

@@ -3,6 +3,6 @@
   "noResults": "No results",
   "clear": "Clear",
   "invalid": "(invalid)",
-  "valid": "valid"
+  "valid": "(valid)"
 
 }

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

@@ -182,7 +182,7 @@ export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: Co
   let validId = useId();
   let validationIcon = validationState === 'invalid'
     ? <AlertMedium id={invalidId} aria-label={stringFormatter.format('invalid')} />
-    : <CheckmarkMedium id={validId} aria-hidden aria-label={stringFormatter.format('valid')} />;
+    : <CheckmarkMedium id={validId} aria-label={stringFormatter.format('valid')} />;
 
   let validation = React.cloneElement(validationIcon, {
     UNSAFE_className: classNames(
@@ -203,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);
@@ -213,17 +214,7 @@ export const ComboBoxButton = React.forwardRef(function ComboBoxButton(props: Co
       focusClass={classNames(styles, 'is-focused')}
       focusRingClass={classNames(styles, 'focus-ring')}>
       <div
-        {...mergeProps(
-          hoverProps,
-          buttonProps,
-          validationState === 'valid' && !isDisabled
-            ? {
-              'aria-describedby': buttonProps['aria-describedby']
-                  ? `${buttonProps['aria-describedby']} ${validId}`
-                  : validId
-            }
-            : undefined
-        )}
+        {...mergeProps(hoverProps, buttonProps)}
         aria-haspopup="dialog"
         ref={objRef}
         style={{...style, outline: 'none'}}

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

@@ -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={