diff --git a/change/@fluentui-react-combobox-f06bf98c-5649-4292-b629-be7bc2e94641.json b/change/@fluentui-react-combobox-f06bf98c-5649-4292-b629-be7bc2e94641.json new file mode 100644 index 00000000000000..ac9107a273cf54 --- /dev/null +++ b/change/@fluentui-react-combobox-f06bf98c-5649-4292-b629-be7bc2e94641.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: button semantics for Combobox chevron, and pointer styles", + "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 fed215f3ee678d..14003e83921ab7 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 @@ -68,6 +68,74 @@ describe('Combobox', () => { expect(container.querySelector('[role=listbox]')).not.toBeNull(); }); + /* Expand icon name */ + it('Sets the chevron button name off the aria-label prop', () => { + const { container } = render( + + + + + , + ); + + const chevronButton = container.querySelector('[role=button]'); + expect(chevronButton?.getAttribute('aria-label')).toEqual('Open test label'); + }); + + it('Sets the chevron button name off the aria-labelledby prop', () => { + const { container } = render( + + + + + , + ); + + const chevronButton = container.querySelector('[role=button]'); + const chevronId = chevronButton?.id; + expect(chevronButton?.getAttribute('aria-label')).toEqual('Open'); + expect(chevronButton?.getAttribute('aria-labelledby')).toEqual(chevronId + ' testId'); + }); + + it('Defaults to "Open" as the chevron label', () => { + const { container } = render( + + + + + , + ); + + const chevronButton = container.querySelector('[role=button]'); + expect(chevronButton?.getAttribute('aria-label')).toEqual('Open'); + expect(chevronButton?.getAttribute('aria-labelledby')).toBeFalsy(); + }); + + it('Respects author-provided labels for the chevron button', () => { + const renderedCombobox = render( + + + + + , + ); + + const chevronButton = renderedCombobox.container.querySelector('[role=button]'); + expect(chevronButton?.getAttribute('aria-label')).toEqual('test label'); + expect(chevronButton?.getAttribute('aria-labelledby')).toBeFalsy(); + + renderedCombobox.rerender( + + + + + , + ); + + expect(chevronButton?.getAttribute('aria-label')).toBeFalsy(); + expect(chevronButton?.getAttribute('aria-labelledby')).toEqual('testId'); + }); + /* 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 387507376d143a..62f751823dd848 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 @@ -13,7 +13,10 @@ exports[`Combobox renders a default state 1`] = ` value="" />