Repository navigation
Announce the current nav page and feedback confirmation to screen readers (#179) - #507
Open
chanellebingham wants to merge 2 commits into
Open
chanellebingham wants to merge 2 commits into
chanellebingham wants to merge 2 commits into
Conversation
This branch has not been deployed
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
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.
Relates to #179
Description
This fixes three of the VoiceOver problems from #179, not the whole issue. The main navigation now announces which page you're on, and the happy/unhappy feedback buttons now say something when you press them and move focus to the thank-you message instead of dropping it back to the page.
The link for the page you're on now also gets aria-current="page", so screen readers announce it as the current page. The "active" class is still there, so it looks the same as before.
One thing for reviewers: after you press a feedback button, focus moves to the same box that announces the message, so some screen readers might read it twice. I kept both on purpose, because moving focus alone isn't always announced, and the announcement alone doesn't fix the lost focus. Moving focus to the comment box instead would also work, if you'd prefer that.
Testing
The new tests fail on main and pass with this change: npm test gives 25 passed. I haven't tried it with a real screen reader yet.
AI usage
I used Claude Code for this PR. The changes it helped with are: the code (feedback.html, active-nav-item/index.js, feedback/index.js, feedback.scss), (test_feedback.py, active-nav-item/index.test.js, feedback/index.test.js).