diff --git a/change/@fluentui-react-d4744099-358e-4a73-991b-8d917fc90753.json b/change/@fluentui-react-d4744099-358e-4a73-991b-8d917fc90753.json new file mode 100644 index 00000000000000..1a30dee6bdfd53 --- /dev/null +++ b/change/@fluentui-react-d4744099-358e-4a73-991b-8d917fc90753.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: ComboBox updates activeDescendant value", + "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 6356b5153c09df..cd1c4eb315c519 100644 --- a/packages/react/src/components/ComboBox/ComboBox.test.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.test.tsx @@ -530,6 +530,25 @@ describe('ComboBox', () => { expect(combobox.getAttribute('value')).toEqual('One'); }); + it('Updates aria-activedescendant with keyboard', () => { + const options: IComboBoxOption[] = [ + { key: '1', text: '1', id: 'one' }, + { key: '2', text: '2', id: 'two' }, + { key: '3', text: '3', id: 'three' }, + ]; + const { getByRole } = render(); + const combobox = getByRole('combobox'); + // open combobox + userEvent.tab(); + userEvent.keyboard('{enter}'); + expect(combobox.getAttribute('aria-expanded')).toEqual('true'); + expect(combobox.getAttribute('aria-activedescendant')).toEqual('one'); + + // arrow down + userEvent.keyboard('{arrowdown}'); + expect(combobox.getAttribute('aria-activedescendant')).toEqual('two'); + }); + it('Cannot insert text while disabled', () => { const { getByRole } = render(); const combobox = getByRole('combobox'); diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index ac7e4fa8f33a60..8c4f9ce65d5146 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -425,11 +425,11 @@ class ComboBoxInternal extends React.Component