feat(textfield): Add proper ARIA labeling to validation icon (#8429)

Author: razvanborsan

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

@@ -0,0 +1,3 @@
+{
+  "valid": "Valid"
+}

packages/@react-spectrum/textfield/package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@react-aria/focus": "^3.20.5",
+    "@react-aria/i18n": "^3.12.10",
     "@react-aria/interactions": "^3.25.3",
     "@react-aria/textfield": "^3.17.5",
     "@react-aria/utils": "^3.29.1",

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

@@ -14,13 +14,16 @@ import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
 import {classNames, createFocusableRef} from '@react-spectrum/utils';
 import {Field} from '@react-spectrum/label';
-import {mergeProps} from '@react-aria/utils';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {mergeProps, useId} from '@react-aria/utils';
 import {PressEvents, RefObject, ValidationResult} from '@react-types/shared';
 import React, {cloneElement, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactElement, Ref, TextareaHTMLAttributes, useImperativeHandle, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import styles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 import {useHover} from '@react-aria/interactions';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 interface TextFieldBaseProps extends Omit<SpectrumTextFieldProps, 'onChange' | 'validate'>, PressEvents, Partial<ValidationResult> {
   wrapperChildren?: ReactElement | ReactElement[],
@@ -91,7 +94,11 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldB
     } as any);
   }
 
-  let validationIcon = isInvalid ? <AlertMedium /> : <CheckmarkMedium />;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/textfield');
+  let validId = useId();
+  let validationIcon = isInvalid
+    ? <AlertMedium />
+    : <CheckmarkMedium id={validId} aria-label={stringFormatter.format('valid')} />;
   let validation = cloneElement(validationIcon, {
     UNSAFE_className: classNames(
       styles,
@@ -122,7 +129,18 @@ export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldB
         )
       }>
       <ElementType
-        {...mergeProps(inputProps, hoverProps, focusProps)}
+        {...mergeProps(
+            inputProps,
+            hoverProps,
+            focusProps,
+            validationState === 'valid' && !isLoading && !isDisabled
+              ? {
+                'aria-describedby': inputProps['aria-describedby']
+                    ? `${inputProps['aria-describedby']} ${validId}`
+                    : validId
+              }
+              : undefined
+          )}
         ref={inputRef as any}
         rows={multiLine ? 1 : undefined}
         className={

packages/@react-spectrum/textfield/stories/Textfield.stories.tsx

@@ -115,6 +115,25 @@ export const WithErrorMessage: TextFieldStory = {
   name: 'with error message'
 };
 
+export const WithValidState: TextFieldStory = {
+  render: (args) => render({
+    ...args,
+    value: '[email protected]',
+    validationState: 'valid'
+  }),
+  name: 'with valid state (shows validation icon)'
+};
+
+export const WithValidStateAndDescription: TextFieldStory = {
+  render: (args) => render({
+    ...args,
+    value: '[email protected]',
+    validationState: 'valid',
+    description: 'This email address is valid and will be used for notifications.'
+  }),
+  name: 'with valid state and description'
+};
+
 export const WithDescriptionErrorMessageAndValidation: TextFieldStory = {
   render: (args) => renderWithDescriptionErrorMessageAndValidation(args),
   name: 'with description, error message and validation'

packages/@react-spectrum/textfield/test/TextField.test.js

@@ -337,7 +337,9 @@ describe('Shared TextField behavior', () => {
     let input = tree.getByTestId(testId);
     let helpText = tree.getByText('Enter a single digit number.');
     expect(helpText).toHaveAttribute('id');
-    expect(input).toHaveAttribute('aria-describedby', `${helpText.id}`);
+    let validIcon = tree.getByLabelText('Valid');
+    expect(validIcon).toHaveAttribute('id');
+    expect(input).toHaveAttribute('aria-describedby', `${helpText.id} ${validIcon.id}`);
     expect(input.value).toBe('0');
     let newValue = 's';
     fireEvent.change(input, {target: {value: newValue}});
@@ -356,7 +358,9 @@ describe('Shared TextField behavior', () => {
     expect(input.value).toBe(newValue);
     helpText = tree.getByText('Enter a single digit number.');
     expect(helpText).toHaveAttribute('id');
-    expect(input).toHaveAttribute('aria-describedby', `${helpText.id}`);
+    validIcon = tree.getByLabelText('Valid');
+    expect(validIcon).toHaveAttribute('id');
+    expect(input).toHaveAttribute('aria-describedby', `${helpText.id} ${validIcon.id}`);
   });
 
   it.each`
@@ -387,7 +391,9 @@ describe('Shared TextField behavior', () => {
     let tree = renderComponent(Example);
     let input = tree.getByTestId(testId);
     let helpText;
-    expect(tree.getByTestId(testId)).not.toHaveAttribute('aria-describedby');
+    let validIcon = tree.getByLabelText('Valid');
+    expect(validIcon).toHaveAttribute('id');
+    expect(tree.getByTestId(testId)).toHaveAttribute('aria-describedby', validIcon.id);
 
     fireEvent.change(input, {target: {value: 's'}});
 
@@ -418,7 +424,9 @@ describe('Shared TextField behavior', () => {
       expect(input.value).toEqual('4');
     });
 
-    expect(input).not.toHaveAttribute('aria-describedby');
+    validIcon = tree.getByLabelText('Valid');
+    expect(validIcon).toHaveAttribute('id');
+    expect(input).toHaveAttribute('aria-describedby', validIcon.id);
   });
 
   it.each`

yarn.lock

@@ -8290,6 +8290,7 @@ __metadata:
   dependencies:
     "@adobe/spectrum-css-temp": "npm:3.0.0-alpha.1"
     "@react-aria/focus": "npm:^3.20.5"
+    "@react-aria/i18n": "npm:^3.12.10"
     "@react-aria/interactions": "npm:^3.25.3"
     "@react-aria/textfield": "npm:^3.17.5"
     "@react-aria/utils": "npm:^3.29.1"