Skip to content
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

Jump to bottom

ARIA-expanded lost in disabled COMBOBOX #2602

Closed
dkireev opened this issue Jul 19, 2023 · 1 comment · Fixed by #2610
Closed

ARIA-expanded lost in disabled COMBOBOX #2602

dkireev opened this issue Jul 19, 2023 · 1 comment · Fixed by #2610
Assignees
@RobinMalfait

Comments

@dkireev
Copy link

dkireev commented Jul 19, 2023

Package: "@headlessui/react": "1.7.13",
All browsers
Link to a repo's file: https://github.com/coingaming/moon-design/blob/develop/workspaces/core/src/combobox/Combobox.tsx

Description:
In your Combobox there's an Input element with role="combobox" which is losing aria-expanded attribute once I set a Combobox state to disabled. Accessibility tests are failing because aria-expanded is required when role="combobox" is used. Here's the link to a description on developer.mozilla.org.

Your function InputFn has a line of code. if changed to 'aria-expanded': data.comboboxState === ComboboxState.Open,, that would solve the issue.
@RobinMalfait RobinMalfait self-assigned this Jul 24, 2023
@RobinMalfait RobinMalfait mentioned this issue Jul 24, 2023
Merged
RobinMalfait added a commit that referenced this issue Jul 24, 2023
@RobinMalfait
define aria-expanded based on open/closed state
c6dc7d2 
You shouldn't be able to open a Listbox/Menu/Combobox/... when the
component is in a disabled state, however if you open it, and then
disable it then it is still in an open state. Therefore the
`aria-expanded` should still be present.

This is also how other libraries behave.

It is also how the native `<select>` behaves. You can open it, disable
it programmatically and then you are still able to make a selection.

This seems enough evidence that this change is an improvement without
being a breaking change.

Fixes: #2602
RobinMalfait added a commit that referenced this issue Jul 24, 2023
@RobinMalfait
Calculate aria-expanded purely based on the open/closed state (#2610)
1739edb 
* define `aria-expanded` based on open/closed state

You shouldn't be able to open a Listbox/Menu/Combobox/... when the
component is in a disabled state, however if you open it, and then
disable it then it is still in an open state. Therefore the
`aria-expanded` should still be present.

This is also how other libraries behave.

It is also how the native `<select>` behaves. You can open it, disable
it programmatically and then you are still able to make a selection.

This seems enough evidence that this change is an improvement without
being a breaking change.

Fixes: #2602

* update changelog
@RobinMalfait
Copy link
Collaborator

Hey, thank you for this bug report! 🙏

It is odd that the Combobox (or any other component) can be opened and then later becomes disabled. But in the case this happens, then you are right that the aria-expanded state should still be based on whether the component is open or closed.

This should be fixed by #2610, and will be available in the next release.

You can already try it using:

  • npm install @headlessui/react@insiders.
  • npm install @headlessui/vue@insiders.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@RobinMalfait RobinMalfait

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Calculate aria-expanded purely based on the open/closed state tailwindlabs/headlessui
2 participants
@RobinMalfait @dkireev