fix(#8328): Field announce error message for focused field

Author: majornista

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;