fix(accessibility): Field announce error message for focused field

Author: Michael Jordan

packages/@react-spectrum/datepicker/test/DateField.test.js

@@ -236,7 +236,7 @@ describe('DateField', function () {
       );
       await user.tab();
       await user.keyboard('01011980');
-      expect(tree.getByText('Date unavailable.')).toBeInTheDocument();
+      expect(tree.getAllByText('Date unavailable.')[0]).toBeInTheDocument();
     });
 
     it('does not crash on unknown segment types', async () => {
@@ -245,7 +245,7 @@ describe('DateField', function () {
           <DateField label="Date" showFormatHelpText />
         </Provider>
       );
-  
+
       let segments = Array.from(getByRole('group').querySelectorAll('[data-testid]'));
       let segmentTypes = segments.map(s => s.getAttribute('data-testid'));
       expect(segmentTypes).toEqual(['year', 'month', 'day']);

packages/@react-spectrum/inlinealert/stories/InlineAlert.stories.tsx

@@ -55,14 +55,18 @@ export const Dynamic = {
   render: (args) => <DynamicExample {...args} />
 };
 
+export const DynamicWithAriaLivePolite = {
+  render: (args) => <DynamicExample aria-live="polite" autoFocus={false} {...args} />
+};
+
 function DynamicExample(args) {
   let [shown, setShown] = useState(false);
 
   return (
     <>
       <Button variant="primary" onPress={() => setShown(!shown)}>{shown ? 'Hide Alert' : 'Show Alert'}</Button>
       {shown &&
-        <InlineAlert {...args} autoFocus>
+        <InlineAlert autoFocus {...args}>
           <Heading>{args.title}</Heading>
           <Content>{args.content}</Content>
         </InlineAlert>

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

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@react-aria/i18n": "^3.12.9",
+    "@react-aria/live-announcer": "^3.4.2",
     "@react-aria/utils": "^3.29.0",
     "@react-spectrum/form": "^3.7.15",
     "@react-spectrum/layout": "^3.6.15",

packages/@react-spectrum/label/src/Field.tsx

@@ -9,14 +9,14 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
+import {announce} from '@react-aria/live-announcer';
 import {classNames, SlotProvider, useStyleProps} from '@react-spectrum/utils';
 import {Flex} from '@react-spectrum/layout';
+import {getActiveElement, mergeProps, useId} from '@react-aria/utils';
 import {HelpText} from './HelpText';
 import {Label} from './Label';
 import {LabelPosition, RefObject} from '@react-types/shared';
 import labelStyles from '@adobe/spectrum-css-temp/components/fieldlabel/vars.css';
-import {mergeProps, useId} from '@react-aria/utils';
 import React, {ReactNode, Ref} from 'react';
 import {SpectrumFieldProps} from '@react-types/label';
 import {useFormProps} from '@react-spectrum/form';
@@ -64,9 +64,19 @@ export const Field = React.forwardRef(function Field(props: SpectrumFieldProps,
   } else {
     errorMessageString = errorMessage;
   }
-  let hasHelpText = !!description || errorMessageString && (isInvalid || validationState === 'invalid');
+  let hasErrorMessage = !!errorMessageString && (isInvalid || validationState === 'invalid');
+  let hasHelpText = !!description || hasErrorMessage;
   let contextualHelpId = useId();
 
+  React.useEffect(() => {
+    if (hasErrorMessage &&
+      (ref as RefObject<HTMLElement>)?.current?.contains(getActiveElement()) &&
+      typeof errorMessageString === 'string' &&
+      errorMessageString.length > 0) {
+      announce(errorMessageString, 'polite');
+    }
+  }, [errorMessageString, hasErrorMessage, ref]);
+
   let fallbackLabelPropsId = useId();
   if (label && contextualHelp && !labelProps.id) {
     labelProps.id = fallbackLabelPropsId;