fix(react-field): Add screenreader announcement for `validationMessag…

…e` if `validationState="warning"` (#33175)
microsoft · Oct 31, 2024 · c262869 · c262869
1 parent fbd3cfd
commit c262869
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/change/@fluentui-react-field-0ea84bed-f738-4788-87cc-114b0078db2d.json b/change/@fluentui-react-field-0ea84bed-f738-4788-87cc-114b0078db2d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-field): Add screenreader announcement for validationMessage if validationState=\"warning\"",
+  "packageName": "@fluentui/react-field",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-field/library/src/components/Field/Field.test.tsx b/packages/react-components/react-field/library/src/components/Field/Field.test.tsx
@@ -251,7 +251,7 @@ describe('Field', () => {
   it.each([
     [undefined, 'alert'], // defaults to error
     ['error', 'alert'],
-    ['warning', null],
+    ['warning', 'alert'],
     ['success', null],
     ['none', null],
   ] as const)('if validationState is %s, sets role to %s on the validationMessage', (validationState, role) => {

diff --git a/packages/react-components/react-field/library/src/components/Field/Field.types.ts b/packages/react-components/react-field/library/src/components/Field/Field.types.ts
@@ -77,7 +77,8 @@ export type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {
    *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a
    *     red border to some field components (such as `Input`).
    * * success: The validation message has a green checkmark icon and gray text.
-   * * warning: The validation message has a yellow exclamation icon and gray text.
+   * * warning: The validation message has a yellow exclamation icon and gray text, with `role="alert"` so it is
+   *     announced by screen readers.
    * * none: The validation message has no icon and gray text.
    *
    * @default error when validationMessage is set; none otherwise.

diff --git a/packages/react-components/react-field/library/src/components/Field/useField.tsx b/packages/react-components/react-field/library/src/components/Field/useField.tsx
@@ -41,7 +41,10 @@ export const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivEleme
     elementType: Label,
   });
   const validationMessage = slot.optional(props.validationMessage, {
-    defaultProps: { id: baseId + '__validationMessage', role: validationState === 'error' ? 'alert' : undefined },
+    defaultProps: {
+      id: baseId + '__validationMessage',
+      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,
+    },
     elementType: 'div',
   });
   const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });
@@ -51,6 +54,7 @@ export const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivEleme
     defaultProps: { children: defaultIcon },
     elementType: 'span',
   });
+
   return {
     children,
     generatedControlId,