From 2965dcc6b8dd64bfd798fdc6496b4cd81bb40318 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 21 Dec 2022 10:32:56 -0800 Subject: [PATCH 1/6] fix: button semantics for Combobox chevron, and pointer styles --- .../react-combobox/src/components/Combobox/useCombobox.tsx | 2 ++ .../react-combobox/src/components/Combobox/useComboboxStyles.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx index 3186c4a71ccff..b92ec810a567a 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx +++ b/packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx @@ -191,7 +191,9 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref, + role: 'button', }, }), ...baseState, diff --git a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts index 71fa65c0a57c6..3626cb4650159 100644 --- a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts +++ b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts @@ -197,6 +197,7 @@ const useIconStyles = makeStyles({ icon: { boxSizing: 'border-box', color: tokens.colorNeutralStrokeAccessible, + cursor: 'pointer', display: 'block', fontSize: tokens.fontSizeBase500, @@ -222,6 +223,7 @@ const useIconStyles = makeStyles({ }, disabled: { color: tokens.colorNeutralForegroundDisabled, + cursor: 'not-allowed', }, }); From ddeeb01904ff3b77b8612a8fe5b501933ef50658 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 21 Dec 2022 10:33:50 -0800 Subject: [PATCH 2/6] Change file --- ...eact-combobox-862eeebf-7ffd-4bc5-b5f4-463b5f0a15c9.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-combobox-862eeebf-7ffd-4bc5-b5f4-463b5f0a15c9.json diff --git a/change/@fluentui-react-combobox-862eeebf-7ffd-4bc5-b5f4-463b5f0a15c9.json b/change/@fluentui-react-combobox-862eeebf-7ffd-4bc5-b5f4-463b5f0a15c9.json new file mode 100644 index 0000000000000..ac9107a273cf5 --- /dev/null +++ b/change/@fluentui-react-combobox-862eeebf-7ffd-4bc5-b5f4-463b5f0a15c9.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" +} From 64d678081092544b7491bc7765a9d78bd10d6f69 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 21 Dec 2022 14:52:55 -0800 Subject: [PATCH 3/6] add chevron accName and tests --- .../src/components/Combobox/Combobox.test.tsx | 68 +++++++++++++++++++ .../__snapshots__/Combobox.test.tsx.snap | 14 ++-- .../src/components/Combobox/useCombobox.tsx | 25 +++++++ 3 files changed, 103 insertions(+), 4 deletions(-) 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 fed215f3ee678..f29278ca15c66 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 387507376d143..62f751823dd84 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="" />