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

[ChristopherRotnes]

Summary

MuscleMap.jsx uses a multi-step flow (upload → analysing → confirm → muscles), but when the active step changes, focus remains on whatever element was last focused — often a button that no longer exists in the new step. Screen reader users receive no indication that the page content has changed and must manually explore to discover the new step. This breaks the fundamental screen reader contract that navigation changes are announced.

Priority

High

Acceptance criteria

• A useEffect on the step state variable programmatically moves focus to a stable landmark (e.g. the step heading or the first interactive element) whenever step changes
• The newly-focused element has a meaningful accessible name that identifies the current step
• The same pattern is applied if any other views perform in-place view transitions without a full page navigation (e.g. template editor modes)
• Tested with a screen reader: changing steps announces the new step name without requiring manual navigation

[ChristopherRotnes]

Fixed in PR #89 (a11y/live-regions): focus moves to page heading on step change (headingRef + useEffect), aria-current="step" on active step, role="list/listitem" on step indicator. Verified by developer.