diff --git a/change/@fluentui-react-dd546ed0-e453-4f25-8149-7f3f79e30e17.json b/change/@fluentui-react-dd546ed0-e453-4f25-8149-7f3f79e30e17.json new file mode 100644 index 00000000000000..28495c85b8016c --- /dev/null +++ b/change/@fluentui-react-dd546ed0-e453-4f25-8149-7f3f79e30e17.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Combobox adds aria-invalid when in an error state", + "packageName": "@fluentui/react", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/ComboBox/ComboBox.test.tsx b/packages/react/src/components/ComboBox/ComboBox.test.tsx index cd1c4eb315c519..d87548b5081ab9 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 aria-invalid when an error message is passed in.', () => { + const { getByRole, rerender } = render(); + const combobox = getByRole('combobox'); + expect(combobox.getAttribute('aria-invalid')).toEqual('true'); + + rerender(); + expect(combobox.getAttribute('aria-invalid')).toBeNull(); + }); + it('Renders no selected item in default case', () => { const { getByRole } = render(); 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 8c4f9ce65d5146..f2b6da0d0d6811 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -659,6 +659,7 @@ class ComboBoxInternal extends React.Component