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.

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

Fix interactivity of listbox options when combobox is in a dialog #197

Merged
merged 2 commits into from
Aug 31, 2024

Conversation

JoshAntBrown
Copy link
Contributor

Resolves #196

It appears that most browsers won't allow the listbox options to receive any pointer events unless they are also focusable.

We probably don't actually want the listbox options to receive focus through the tab sequence, since this would be in conflict with the combobox pattern as described by W3: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

Note: The popup indicator icon or button (if present), the popup, and the popup descendants are excluded from the page Tab sequence.

Fortunately, it seems setting a tabindex of -1 on the options satisfies both parts.

@josefarias
Copy link
Owner

@JoshAntBrown thanks for a great bug report, and an immediate fix! Really appreciate your thoroughness here.

I've added a test, and made an inconsequential cosmetic change to match other tabindex attrs defined elsewhere in the library.

Gotta leave for the day, but I plan to merge this tomorrow once CI is green.

Thanks again!

@josefarias josefarias added the bug Something isn't working label Aug 31, 2024
@josefarias josefarias merged commit 79302f8 into josefarias:main Aug 31, 2024
2 checks passed
@JoshAntBrown JoshAntBrown deleted the fix/combobox-in-dialog branch September 3, 2024 21:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Combobox options do not work within a dialog element
2 participants