diff --git a/change/@fluentui-react-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json b/change/@fluentui-react-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json new file mode 100644 index 00000000000000..29b71f78696eb8 --- /dev/null +++ b/change/@fluentui-react-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: add aria-owns to combobox and dropdown\"", + "packageName": "@fluentui/react-combobox", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx index 14003e83921ab7..928b1c1310ce05 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx @@ -136,6 +136,18 @@ describe('Combobox', () => { expect(chevronButton?.getAttribute('aria-labelledby')).toEqual('testId'); }); + it('adds aria-owns pointing to the popup', () => { + const { getByRole, container } = render( + + + + + , + ); + const listboxId = getByRole('listbox').id; + expect(container.querySelector('.root')?.getAttribute('aria-owns')).toEqual(listboxId); + }); + /* open/close tests */ it('opens the popup on click', () => { const { getByRole } = render( diff --git a/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap b/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap index 62f751823dd848..68106a0997cbb6 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap +++ b/packages/react-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap @@ -43,7 +43,7 @@ exports[`Combobox renders an open listbox 1`] = ` class="fui-Combobox" >
{ expect(container.querySelector('[role=listbox]')).not.toBeNull(); }); + it('adds aria-owns pointing to the popup', () => { + const { getByRole, container } = render( + + + + + , + ); + + const listboxId = getByRole('listbox').id; + expect(container.querySelector('.root')?.getAttribute('aria-owns')).toEqual(listboxId); + }); + /* open/close tests */ it('opens the popup on click', () => { const { getByRole } = render( diff --git a/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap index 7dcf6069bcc49f..74ee1175af7b74 100644 --- a/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap +++ b/packages/react-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -40,7 +40,7 @@ exports[`Dropdown renders an open listbox 1`] = ` class="fui-Dropdown" >