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: Add ComboBox status text and aria-activedescendant values #1716

Merged
merged 3 commits into from
Oct 26, 2021

Conversation

suzubara
Copy link
Contributor

Summary

This PR adds a few missing a11y features to the ComboBox component, and also makes some minor UX tweaks to match the USWDS implementation. I also grouped some tests together to make them a little more organized.

Related Issues or PRs

Fixes #1690

How To Test

aria-activedescendant

  • The input element should have this attribute when the list is opened, and the value should be the id attribute of the currently focused option (ie, listID--option-<index>). If there is no focused option or the list is closed, this attribute should be an empty string.
  • This change has high coverage in unit tests.

status text

  • The status text element should have contents updated when the list is opened, filtered, and closed. It informs the user about the number of options available, or says "No results" if there are none. When the list is closed, the text is set to an empty string.
  • This change has high coverage in unit tests.

other

  • Previously the ComboBox specifically did not close the menu if there was a selected value and you press the up arrow from the first option. However this does not match the USWDS behavior, so I changed this. To test:
    • Using the keyboard arrow navigation, open the combo box list and select an option with the enter key
    • Re-open the list with the down arrow
    • Verify that pressing the up arrow from the first option will close the list and bring focus back to the text input

@suzubara suzubara added a11y Relates to accessibility standards and practices type: bug Something isn't working like it's supposed to labels Oct 26, 2021
@trussworks-infra-zz
Copy link

trussworks-infra-zz commented Oct 26, 2021

Warnings
⚠️ This PR does not include changes to storybook, even though it affects component code.

Generated by 🚫 dangerJS against 7feeab7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Relates to accessibility standards and practices type: bug Something isn't working like it's supposed to
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[fix] ComboBox is missing status text and aria-activedescendant attribute
3 participants