diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index ef674528a7..0c376169ea 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Ensure we handle `null` dataRef values correctly ([#2258](https://github.com/tailwindlabs/headlessui/pull/2258)) +- Move `aria-multiselectable` to `[role=listbox]` in the `Combobox` component ([#2271](https://github.com/tailwindlabs/headlessui/pull/2271)) ## [1.7.10] - 2023-02-06 diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index 5bc8d48cbe..008fc2845f 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -938,7 +938,6 @@ let Input = forwardRefWithAs(function Input< 'aria-expanded': data.disabled ? undefined : data.comboboxState === ComboboxState.Open, 'aria-activedescendant': data.activeOptionIndex === null ? undefined : data.options[data.activeOptionIndex]?.id, - 'aria-multiselectable': data.mode === ValueMode.Multi ? true : undefined, 'aria-labelledby': labelledby, 'aria-autocomplete': 'list', defaultValue: @@ -1186,6 +1185,7 @@ let Options = forwardRefWithAs(function Options< let ourProps = { 'aria-labelledby': labelledby, role: 'listbox', + 'aria-multiselectable': data.mode === ValueMode.Multi ? true : undefined, id, ref: optionsRef, } diff --git a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts index 89d201e10f..50a4f9c467 100644 --- a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts +++ b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts @@ -281,7 +281,8 @@ export function assertCombobox( state: ComboboxState mode?: ComboboxMode }, - combobox = getComboboxInput() + combobox = getComboboxInput(), + listbox = getListbox() ) { try { switch (options.state) { @@ -307,7 +308,7 @@ export function assertCombobox( expect(combobox).toHaveAttribute('role', 'combobox') if (options.mode && options.mode === ComboboxMode.Multiple) { - expect(combobox).toHaveAttribute('aria-multiselectable', 'true') + expect(listbox).toHaveAttribute('aria-multiselectable', 'true') } if (options.textContent) expect(combobox).toHaveTextContent(options.textContent) diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 790e92c64b..937f4bb433 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Don’t fire `afterLeave` event more than once for a given transition ([#2267](https://github.com/tailwindlabs/headlessui/pull/2267)) +- Move `aria-multiselectable` to `[role=listbox]` in the `Combobox` component ([#2271](https://github.com/tailwindlabs/headlessui/pull/2271)) ## [1.7.9] - 2023-02-03 diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts index 709e0688cb..dbc820d95a 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.ts +++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts @@ -907,7 +907,6 @@ export let ComboboxInput = defineComponent({ api.activeOptionIndex.value === null ? undefined : api.options.value[api.activeOptionIndex.value]?.id, - 'aria-multiselectable': api.mode.value === ValueMode.Multi ? true : undefined, 'aria-labelledby': dom(api.labelRef)?.id ?? dom(api.buttonRef)?.id, 'aria-autocomplete': 'list', id, @@ -990,6 +989,7 @@ export let ComboboxOptions = defineComponent({ id, ref: api.optionsRef, role: 'listbox', + 'aria-multiselectable': api.mode.value === ValueMode.Multi ? true : undefined, } let theirProps = omit(props, ['hold']) diff --git a/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts index 89d201e10f..50a4f9c467 100644 --- a/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts +++ b/packages/@headlessui-vue/src/test-utils/accessibility-assertions.ts @@ -281,7 +281,8 @@ export function assertCombobox( state: ComboboxState mode?: ComboboxMode }, - combobox = getComboboxInput() + combobox = getComboboxInput(), + listbox = getListbox() ) { try { switch (options.state) { @@ -307,7 +308,7 @@ export function assertCombobox( expect(combobox).toHaveAttribute('role', 'combobox') if (options.mode && options.mode === ComboboxMode.Multiple) { - expect(combobox).toHaveAttribute('aria-multiselectable', 'true') + expect(listbox).toHaveAttribute('aria-multiselectable', 'true') } if (options.textContent) expect(combobox).toHaveTextContent(options.textContent)