Move aria-multiselectable to [role=listbox] in the Combobox com…

…ponent (#2271) * move `aria-multiselectable` to `[role=listbox]` in the `Combobox` component * update changelog
tailwindlabs · Feb 10, 2023 · 7ecf832 · 7ecf832
1 parent 0ff2326
commit 7ecf832
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)