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 BeforeOptions search input missing aria-expanded #1716

Merged
merged 1 commit into from
Feb 29, 2024

Conversation

alex-ju
Copy link
Contributor

@alex-ju alex-ju commented Feb 29, 2024

Summary

The search input in BeforeOptions has a role="combobox" which requires an "aria-expanded" attribute (set to "true" or "false") depending on the state.

Generally, the BeforeOptions is only visible when the PowerSelect is expanded, but since we have access to its state we can use @select.isOpen to conditionally apply this value.

Example

The example below uses the helpers-testing-single-power-select instance in the test-app with either a @labelText="Label" or an @ariaLabel="Label" provided to the <PowerSelect>.

Automated accessibility checks using axe

BeforeAfter
03-BeforeOptions-before 04-BeforeOptions-after

Motivation

At @hashicorp we use <PowerSelect> extensively and we are grateful to see the many improvements introduced lately.

This change is primarily motivated by the desire to further improve the accessibility compliance of this component – in this instance, by providing the required aria attribute for the combobox element.

Elements with `role="combobox"` require an "aria-expanded" attribute (set to "true" or "false") depending on the state.
@mkszepp
Copy link
Collaborator

mkszepp commented Feb 29, 2024

Thank you so much!

@mkszepp mkszepp merged commit 6ccd4cf into cibernox:master Feb 29, 2024
19 checks passed
@mkszepp mkszepp added the bug label Feb 29, 2024
@alex-ju alex-ju deleted the alex-ju/a11y-fix-search-input branch February 29, 2024 18:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants