ETT-801: fix a11y of sidebar mobile view#189
Merged
carylwyatt merged 1 commit intomainfrom Mar 3, 2026
Merged
Conversation
kron-spar
approved these changes
Mar 2, 2026
Contributor
kron-spar
left a comment
kron-spar
left a comment
There was a problem hiding this comment.
I was able to use the inspect tools to mock different mobile screen sizes from smaller phones to larger phones and can confirm that when tabbing around, the focus state was obvious and on the screen the whole time.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This ticket was originally about fixing the mobile sidebar because it was receiving focus when it was hidden.
I fixed that, but I realized two other things were not accessible about the "Options" button: the focus state of the button was not obvious and the "Options" button didn't have the correct markup/aria to express that the "accordion" (sidebar panel) was open/expanded.
This is staged on dev-3 for review: https://dev-3.babel.hathitrust.org/cgi/pt?id=1
Narrow your browser window until the sidebar disappears from view and you see the "Options" button appear under the navbar. Then use your keyboard to tab to the "Options" button. To test that the sidebar doesn't receive focus, keep tabbing past the options button. You should be able to see the blue focus ring as you tab back to the options button (instead of what it currently does, which is tab around in the closed sidebar that you can't see).