Skip to content

fix: add aria-owns to react-combobox non-inline popups #26246

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
smhigley merged 4 commits into from
Jan 11, 2023
Merged

fix: add aria-owns to react-combobox non-inline popups #26246

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
85794f9
fix: add aria-owns to combobox and dropdown root
smhigley Jan 6, 2023
cbeba3f
change file
smhigley Jan 6, 2023
8a6abae
fix typo
smhigley Jan 11, 2023
a31293d
update snapshot after rebase
smhigley Jan 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-combobox-9ad3f5bc-8c19-4f73-a4b3-1cd41e43e7b2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
12 changes: 12 additions & 0 deletions packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<Combobox open className="root">
<Option>Red</Option>
<Option>Green</Option>
<Option>Blue</Option>
</Combobox>,
);
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(
Expand Down
9 changes: 5 additions & 4 deletions ...ct-components/react-combobox/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ exports[`Combobox renders an open listbox 1`] = `
class="fui-Combobox"
>
<input
aria-activedescendant="fluent-option11"
aria-activedescendant="fluent-option21"
aria-expanded="true"
class="fui-Combobox__input"
role="combobox"
Expand Down Expand Up @@ -73,13 +73,14 @@ exports[`Combobox renders an open listbox 1`] = `
</span>
<div
class="fui-Listbox fui-Combobox__listbox"
id="fluent-listbox20"
role="listbox"
style="position: fixed; left: 0px; top: 0px; margin: 0px; width: 0px;"
>
<div
aria-selected="false"
class="fui-Option"
id="fluent-option11"
id="fluent-option21"
role="option"
>
<span
Expand All @@ -106,7 +107,7 @@ exports[`Combobox renders an open listbox 1`] = `
<div
aria-selected="false"
class="fui-Option"
id="fluent-option12"
id="fluent-option22"
role="option"
>
<span
Expand All @@ -133,7 +134,7 @@ exports[`Combobox renders an open listbox 1`] = `
<div
aria-selected="false"
class="fui-Option"
id="fluent-option13"
id="fluent-option23"
role="option"
>
<span
Expand Down
3 changes: 2 additions & 1 deletion packages/react-components/react-combobox/src/components/Combobox/useCombobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
setValue,
value,
} = baseState;
const { disabled, freeform, multiselect } = props;
const { disabled, freeform, inlinePopup, multiselect } = props;
const comboId = useId('combobox-');

const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
Expand Down Expand Up @@ -194,6 +194,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLIn
root: resolveShorthand(props.root, {
required: true,
defaultProps: {
'aria-owns': !inlinePopup ? listboxSlot?.id : undefined,
...rootNativeProps,
},
}),
Expand Down
13 changes: 13 additions & 0 deletions packages/react-components/react-combobox/src/components/Dropdown/Dropdown.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,19 @@ describe('Dropdown', () => {
expect(container.querySelector('[role=listbox]')).not.toBeNull();
});

it('adds aria-owns pointing to the popup', () => {
const { getByRole, container } = render(
<Dropdown open className="root">
<Option>Red</Option>
<Option>Green</Option>
<Option>Blue</Option>
</Dropdown>,
);

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(
Expand Down
9 changes: 5 additions & 4 deletions ...ct-components/react-combobox/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ exports[`Dropdown renders an open listbox 1`] = `
class="fui-Dropdown"
>
<button
aria-activedescendant="fluent-option1"
aria-activedescendant="fluent-option11"
aria-expanded="true"
class="fui-Dropdown__button"
role="combobox"
Expand All @@ -67,13 +67,14 @@ exports[`Dropdown renders an open listbox 1`] = `
</button>
<div
class="fui-Listbox fui-Dropdown__listbox"
id="fluent-listbox10"
role="listbox"
style="position: fixed; left: 0px; top: 0px; margin: 0px; width: 0px;"
>
<div
aria-selected="false"
class="fui-Option"
id="fluent-option1"
id="fluent-option11"
role="option"
>
<span
Expand All @@ -100,7 +101,7 @@ exports[`Dropdown renders an open listbox 1`] = `
<div
aria-selected="false"
class="fui-Option"
id="fluent-option2"
id="fluent-option12"
role="option"
>
<span
Expand All @@ -127,7 +128,7 @@ exports[`Dropdown renders an open listbox 1`] = `
<div
aria-selected="false"
class="fui-Option"
id="fluent-option3"
id="fluent-option13"
role="option"
>
<span
Expand Down
1 change: 1 addition & 0 deletions packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ export const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLBu
root: resolveShorthand(props.root, {
required: true,
defaultProps: {
'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,
children: props.children,
...rootNativeProps,
},
Expand Down
4 changes: 3 additions & 1 deletion packages/react-components/react-combobox/src/utils/useTriggerListboxSlots.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
import { mergeCallbacks, useId, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
import type { ExtractSlotProps, Slot } from '@fluentui/react-utilities';
import { getDropdownActionFromKey, getIndexFromAction } from '../utils/dropdownKeyActions';
import { Listbox } from '../components/Listbox/Listbox';
Expand Down Expand Up @@ -54,7 +54,9 @@ export function useTriggerListboxSlots(
const triggerRef: typeof ref = React.useRef(null);

// resolve listbox shorthand props
const listboxId = useId('fluent-listbox', listboxSlot?.id);
const listbox: typeof listboxSlot = listboxSlot && {
id: listboxId,
multiselect,
tabIndex: undefined,
...listboxSlot,
Expand Down