User can't select cards on dashboard (views) via keyboard #1473
Labels
Projects
Comments
jonespm
changed the title
jonespm
added a commit
to jonespm/student-dashboard-django
that referenced
this issue
Jan 26, 2023
…views) via keyboard
jonespm
added a commit
to jonespm/student-dashboard-django
that referenced
this issue
Jan 26, 2023
…views) via keyboard
ssciolla
added a commit
that referenced
this issue
Jan 27, 2023
…eader text (#1473) (#1475) * Fixes #1473 - User can't select cards on dashboard (views) via keyboard * Use layering approach; fix linting errors * Tweak a couple things * Change to img, add aria-label to help link to improve screenreader text * Improve enable aria-label * Remove unused CSS class; adjust percentages to mirror previous state --------- Co-authored-by: Code Hugger (Matthew Jones) <jonespm@umich.edu>
|
Testing passes in beta. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thank you for contributing to this project!
Expected behavior (A description of what you expected to happen) :
The list of views should be keyboard accessible, i.e. you should be able to use Tab and Shift + Tab to navigate through them and back, and press Enter to select one.
Describe the bug (Tell us what happens instead of the expected behavior) :
The user can Tab through the list of view cards, but pressing Enter when the view cards is in focus does not send the user to the corresponding view.
Additional context (Add any other context about the problem here) :
Looking at the source code, it looks like this was partially the result of an attempt to include the help link in the card. Nested
atags are invalid HTML I guess, so the solution at the time was to separately link different parts of the card (title, description, image. etc.) but give them alltabindex=-1. The card itself still hastabindex=0but there is no link attached to it.Some initial research suggests that one solution may to use CSS to layer the help link on top of card. See https://css-tricks.com/nested-links/
The text was updated successfully, but these errors were encountered: