fix: v8 Combobox & Dropdown: add aria-invalid when errorMessage is set (#33529)

Author: smhigley

change/@fluentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(Combobox and Dropdown): add aria-invalid when errorMessage is set",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -1837,6 +1837,7 @@ exports[`Pagination render comboBox Pagination correctly 1`] = `
       <input
         aria-autocomplete="both"
         aria-expanded={false}
+        aria-invalid={false}
         autoCapitalize="off"
         autoComplete="off"
         className=

packages/react/src/components/ComboBox/ComboBox.test.tsx

@@ -122,6 +122,15 @@ describe('ComboBox', () => {
     expect(combobox.getAttribute('aria-disabled')).toEqual('true');
   });
 
+  it('sets alert message and aria-invalid when errorMessage is set', () => {
+    const { getByRole } = render(
+      <ComboBox label="Test label" options={DEFAULT_OPTIONS} errorMessage="This is an example error." />,
+    );
+    const alert = getByRole('alert');
+    expect(alert.textContent).toBe('This is an example error.');
+    expect(getByRole('combobox').getAttribute('aria-invalid')).toBe('true');
+  });
+
   it('Renders no selected item in default case', () => {
     const { getByRole } = render(<ComboBox options={DEFAULT_OPTIONS} />);
     expect(getByRole('combobox').getAttribute('value')).toEqual('');

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -646,6 +646,8 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
       'aria-label': ariaLabel && !label ? ariaLabel : undefined,
     };
 
+    const hasErrorMessage = errorMessage && errorMessage.length > 0 ? true : false;
+
     return (
       <div
         data-ktp-target={true}
@@ -679,6 +681,7 @@ class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBox
           aria-activedescendant={ariaActiveDescendantValue}
           aria-required={required}
           aria-disabled={disabled}
+          aria-invalid={hasErrorMessage}
           aria-controls={isOpen ? this._id + '-list' : undefined}
           spellCheck={false}
           defaultVisibleValue={this._currentVisibleValue}

packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap

@@ -145,6 +145,7 @@ exports[`ComboBox Renders correctly 1`] = `
       <input
         aria-autocomplete="both"
         aria-expanded="false"
+        aria-invalid="false"
         autocapitalize="off"
         autocomplete="off"
         class=
@@ -495,6 +496,7 @@ exports[`ComboBox Renders correctly when open 1`] = `
         aria-autocomplete="both"
         aria-controls="ComboBox0-list"
         aria-expanded="true"
+        aria-invalid="false"
         autocapitalize="off"
         autocomplete="off"
         class=
@@ -1333,6 +1335,7 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
         aria-autocomplete="both"
         aria-controls="ComboBox0-list"
         aria-expanded="true"
+        aria-invalid="false"
         autocapitalize="off"
         autocomplete="off"
         class=
@@ -2266,6 +2269,7 @@ exports[`ComboBox renders with a Keytip correctly 1`] = `
         aria-autocomplete="both"
         aria-describedby="test-foo ktp-layer-id ktp-a"
         aria-expanded="false"
+        aria-invalid="false"
         autocapitalize="off"
         autocomplete="off"
         class=

packages/react/src/components/Dropdown/Dropdown.base.tsx

@@ -376,6 +376,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
           aria-describedby={hasErrorMessage ? this._id + '-errorMessage' : undefined}
           aria-required={required}
           aria-disabled={disabled}
+          aria-invalid={hasErrorMessage}
           aria-controls={isOpen ? this._listId : undefined}
           {...divProps}
           className={this._classNames.dropdown}
@@ -391,7 +392,6 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
             className={this._classNames.title}
             aria-live={hasFocus ? 'polite' : undefined}
             aria-atomic={hasFocus ? true : undefined}
-            aria-invalid={hasErrorMessage}
           >
             {
               // If option is selected render title, otherwise render the placeholder text

packages/react/src/components/Dropdown/Dropdown.test.tsx

@@ -710,12 +710,13 @@ describe('Dropdown', () => {
       expect(dropdownRoot.getAttribute('aria-labelledby')).not.toBeNull();
     });
 
-    it('sets role=error on included error message', () => {
+    it('sets alert message and aria-invalid when errorMessage is set', () => {
       const { getByRole } = render(
         <Dropdown label="Test label" options={[]} id="sample-dropdown" errorMessage="This is an example error." />,
       );
       const alert = getByRole('alert');
       expect(alert.textContent).toBe('This is an example error.');
+      expect(getByRole('combobox').getAttribute('aria-invalid')).toBe('true');
     });
   });
 

packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`Dropdown multi-select Renders correctly 1`] = `
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
+      aria-invalid="false"
       class=
           ms-Dropdown
           {
@@ -101,7 +102,6 @@ exports[`Dropdown multi-select Renders correctly 1`] = `
       tabindex="0"
     >
       <span
-        aria-invalid="false"
         class=
             ms-Dropdown-title
             ms-Dropdown-titleIsPlaceHolder
@@ -939,6 +939,7 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
         aria-controls="Dropdown0-list"
         aria-expanded="true"
         aria-haspopup="listbox"
+        aria-invalid="false"
         class=
             ms-Dropdown
             is-open
@@ -1034,7 +1035,6 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
       >
         <span
           aria-atomic="true"
-          aria-invalid="false"
           aria-live="polite"
           class=
               ms-Dropdown-title
@@ -1119,6 +1119,7 @@ exports[`Dropdown single-select Renders correctly 1`] = `
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
+      aria-invalid="false"
       class=
           ms-Dropdown
           {
@@ -1212,7 +1213,6 @@ exports[`Dropdown single-select Renders correctly 1`] = `
       tabindex="0"
     >
       <span
-        aria-invalid="false"
         class=
             ms-Dropdown-title
             ms-Dropdown-titleIsPlaceHolder
@@ -1295,6 +1295,7 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
         aria-controls="Dropdown0-list"
         aria-expanded="true"
         aria-haspopup="listbox"
+        aria-invalid="false"
         class=
             ms-Dropdown
             is-open
@@ -1390,7 +1391,6 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
       >
         <span
           aria-atomic="true"
-          aria-invalid="false"
           aria-live="polite"
           class=
               ms-Dropdown-title

packages/react/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap

@@ -174,6 +174,7 @@ exports[`TimePicker renders correctly 1`] = `
       aria-autocomplete="inline"
       aria-describedby="ComboBox0-error"
       aria-expanded={false}
+      aria-invalid={false}
       aria-labelledby="ComboBox0-label"
       autoCapitalize="off"
       autoComplete="off"