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

Implement WCAG keyboard inputs for AccessibleDropdown #513

Open
ShrimpCryptid opened this issue Jan 8, 2025 · 0 comments
Open

Implement WCAG keyboard inputs for AccessibleDropdown #513

ShrimpCryptid opened this issue Jan 8, 2025 · 0 comments
Assignees
Labels
ux-implementation UX research completed, this ticket is ready for implementation.

Comments

@ShrimpCryptid
Copy link
Contributor

Use Case

Extension off of #408 ("Align dropdowns with WCAG rules (keyboard inputs") and #428 ("refactor: Use react-select for selection dropdowns"). Implement WCAG/Aria spec in AccessibleDropdown, currently used for the Help menu.

Acceptance Criteria

  • AccessibleDropdown should open only on click (not on hover) or spacebar button input.
  • Up/down arrow keys should move the focused element in the list, and clicking again with the spacebar should select it and close the menu.
  • Home/End should move to the top or bottom of the dropdown list.
  • Styling/visual appearance should be identical to the original dropdowns.

Details

  • Currently this is only used in Help dropdown.
  • Look into WCAG rules for menus?
  • Can we use react-select? Another component?
@ShrimpCryptid ShrimpCryptid added the ux-implementation UX research completed, this ticket is ready for implementation. label Jan 8, 2025
@ShrimpCryptid ShrimpCryptid self-assigned this Jan 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ux-implementation UX research completed, this ticket is ready for implementation.
Projects
None yet
Development

No branches or pull requests

1 participant