a11y: aria-live regions and step focus management#89
Merged
Conversation
- Report.jsx: wrap data loading/error and recs loading/error in aria-live="polite" so screen readers hear state changes - History.jsx: add aria-live + aria-busy to calendar skeleton and session accordion skeleton - Home.jsx: add aria-live + aria-busy to last-session loading indicator - MuscleMap.jsx: move focus to heading on step change (headingRef + useEffect); add role="list"/role="listitem" and aria-current="step" to the step progress indicator; wrap upload error in aria-live Closes #73, #72, #80 (partial) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This was referenced May 3, 2026
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
1 participant
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.
Summary
Report.jsx: wrap data loading/error and recommendations loading/error inaria-live="polite"so screen readers announce state changes (As a screen reader user I want loading and error states to be announced automatically so I know when the app is busy or an error occurs #73)History.jsx: addaria-live="polite" aria-busy="true"to the calendar skeleton and session accordion skeleton (As a screen reader user I want loading and error states to be announced automatically so I know when the app is busy or an error occurs #73)Home.jsx: addaria-live="polite" aria-busy="true"to the last-session loading indicator (As a screen reader user I want loading and error states to be announced automatically so I know when the app is busy or an error occurs #73)MuscleMap.jsx: move keyboard focus to the page heading when the step changes (headingRef+useEffect); addrole="list"/role="listitem"andaria-current="step"to the step progress indicator; wrap upload errors inaria-live(As a screen reader user I want focus to move to new content when I navigate between steps so I know the view has changed #72)Issues closed
Closes #73, #72
Test plan
aria-current="step"(verifiable via browser devtools)🤖 Generated with Claude Code