From 1d135b44a87cc562134844c42ae9d6e1c84324e1 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Mon, 30 Dec 2024 12:45:51 -0800
Subject: [PATCH 1/4] add aria-invalid to both Dropdown and Combobox

---
 packages/react/src/components/ComboBox/ComboBox.test.tsx | 9 +++++++++
 packages/react/src/components/ComboBox/ComboBox.tsx      | 3 +++
 packages/react/src/components/Dropdown/Dropdown.base.tsx | 2 +-
 packages/react/src/components/Dropdown/Dropdown.test.tsx | 3 ++-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.test.tsx b/packages/react/src/components/ComboBox/ComboBox.test.tsx
index cd1c4eb315c519..235039068bf7c9 100644
--- a/packages/react/src/components/ComboBox/ComboBox.test.tsx
+++ b/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('');
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 6e558e4fa347d2..e342c4b6798a35 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/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}
diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index 27c4675521c1b7..70498f5ac23212 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/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
diff --git a/packages/react/src/components/Dropdown/Dropdown.test.tsx b/packages/react/src/components/Dropdown/Dropdown.test.tsx
index f8a89af7a4ae05..dc2cfd17cfa653 100644
--- a/packages/react/src/components/Dropdown/Dropdown.test.tsx
+++ b/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');
     });
   });
 

From 077d70bc099a7dac2e7a2369e0a3256c3cbfae60 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Mon, 30 Dec 2024 13:34:21 -0800
Subject: [PATCH 2/4] update snapshots

---
 .../ComboBox/__snapshots__/ComboBox.test.tsx.snap         | 4 ++++
 .../Dropdown/__snapshots__/Dropdown.test.tsx.snap         | 8 ++++----
 .../TimePicker/__snapshots__/TimePicker.test.tsx.snap     | 1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
index 3b70af4eeb29a7..0c88b4eb66d0d8 100644
--- a/packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
+++ b/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=
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index a3f91242ae665a..d226380e10f15c 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/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
diff --git a/packages/react/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/react/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
index 653fc0d856eb44..97a83b42543428 100644
--- a/packages/react/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
+++ b/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"

From ca043bd717e0db806d146c0e965dc9ea55feaf1f Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Mon, 30 Dec 2024 15:55:12 -0800
Subject: [PATCH 3/4] change file

---
 ...luentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json

diff --git a/change/@fluentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json b/change/@fluentui-react-b9ca80e1-5566-481a-b758-61a5cf7a9c9f.json
new file mode 100644
index 00000000000000..e3bfbd48d513a2
--- /dev/null
+++ b/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": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 67d9a9ae6e0597583172db8a3c27c5fd4cd8d301 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Thu, 2 Jan 2025 13:44:10 -0800
Subject: [PATCH 4/4] update snapshot

---
 .../components/Pagination/__snapshots__/Pagination.test.tsx.snap | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
index 5d792ca0c57ca3..ace3981b0a5b91 100644
--- a/packages/react-experiments/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/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=