Skip to content

a11y: accessible labels and validation ARIA on form inputs#85

Merged
ChristopherRotnes merged 1 commit into
masterfrom
a11y/form-inputs
May 3, 2026
Merged

a11y: accessible labels and validation ARIA on form inputs#85
ChristopherRotnes merged 1 commit into
masterfrom
a11y/form-inputs

Conversation

@ChristopherRotnes
Copy link
Copy Markdown
Owner

Summary

Adds programmatic labels and validation state to the custom inputs used throughout the app so screen reader users know what each field is for and hear errors without manually hunting for them.

  • ExerciseRowaria-label="Øvelsenavn" on the exercise name input; aria-label, aria-invalid, and aria-describedby on sets/reps inputs; an off-screen error <span> announces "Ugyldig antall – skriv inn 1 til 99" when a value is invalid
  • MusclePicker — the help text span gets a stable id; the picker wrapper gets aria-describedby pointing to it so screen readers read the instructions on focus; aria-hidden="true" added to the decorative body outline <g> and FRONT/BACK <text> (same pattern as bodymap.jsx in PR a11y: set HTML lang, add reduced-motion CSS, hide decorative SVG elements #84)

Test plan

  • Tab into an exercise row name field — screen reader announces "Øvelsenavn"
  • Tab into a sets or reps field — screen reader announces e.g. "Sett for Knebøy"
  • Enter an invalid value (e.g. 0 or 999) and submit — screen reader announces the error without manual navigation
  • Tab into the MusclePicker — screen reader reads the "Klikk muskel: av → primær → sekundær → av" instructions

Closes #70, #77, #83

🤖 Generated with Claude Code

- ExerciseRow: aria-label="Øvelsenavn" on exercise name input
- ExerciseRow: aria-label, aria-invalid, aria-describedby on sets/reps inputs; off-screen error span announces "Ugyldig antall" to screen readers when invalid
- MusclePicker: id on help text span + aria-describedby on picker wrapper so instructions are read on focus; aria-hidden on decorative body outline <g> and FRONT/BACK <text>

Closes #70, #77, #83

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ChristopherRotnes ChristopherRotnes merged commit 8f5ffe2 into master May 3, 2026
2 checks passed
@ChristopherRotnes ChristopherRotnes deleted the a11y/form-inputs branch May 3, 2026 15:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

As a screen reader user I want all form inputs to have accessible labels so I can understand what each field is for

1 participant