From 53664667d19b9ef96563589d67877547102b97b9 Mon Sep 17 00:00:00 2001
From: Christopher Rotnes <christopher.rotnes@obos.no>
Date: Sun, 3 May 2026 17:34:52 +0200
Subject: [PATCH] feat(a11y): add accessible labels and validation ARIA to form
 inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 app/src/components/ExerciseRow.jsx  | 70 ++++++++++++++++++-----------
 app/src/components/MusclePicker.jsx | 10 +++--
 2 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/app/src/components/ExerciseRow.jsx b/app/src/components/ExerciseRow.jsx
index 302d7a3..c16f47a 100644
--- a/app/src/components/ExerciseRow.jsx
+++ b/app/src/components/ExerciseRow.jsx
@@ -44,6 +44,7 @@ export default function ExerciseRow({
         {editingName ? (
           <input
             autoFocus
+            aria-label="Øvelsenavn"
             value={exercise.name}
             onChange={(e) => onChange({ name: e.target.value, standardName: e.target.value })}
             onBlur={() => setEditingName(false)}
@@ -77,33 +78,48 @@ export default function ExerciseRow({
       </div>
 
       <div style={{ display: "flex", alignItems: "center", gap: 4, flexShrink: 0 }}>
-        {["sets", "reps"].map(field => (
-          <div key={field} style={{ display: "flex", alignItems: "center", gap: 2 }}>
-            <input
-              type="number"
-              min="1"
-              max="99"
-              placeholder="–"
-              value={exercise[field] || ""}
-              onChange={e => onChange({ [field]: e.target.value })}
-              style={{
-                width: 40,
-                height: 28,
-                padding: "0 4px",
-                background: "var(--cds-field-01)",
-                border: `1px solid ${validateNumbers && isInvalidNum(exercise[field]) ? "var(--cds-support-error)" : "var(--cds-border-strong-01)"}`,
-                color: validateNumbers && isInvalidNum(exercise[field]) ? "var(--cds-support-error)" : "var(--cds-text-primary)",
-                fontFamily: "var(--cds-font-sans)",
-                fontSize: 12,
-                outline: "none",
-                textAlign: "center",
-              }}
-            />
-            <span style={{ fontSize: 11, color: "var(--cds-text-secondary)" }}>
-              {field === "sets" ? "sett" : "reps"}
-            </span>
-          </div>
-        ))}
+        {["sets", "reps"].map(field => {
+          const isFieldInvalid = validateNumbers && isInvalidNum(exercise[field]);
+          const errorId = `err-${exercise.id}-${field}`;
+          return (
+            <div key={field} style={{ display: "flex", alignItems: "center", gap: 2, position: "relative" }}>
+              <input
+                type="number"
+                min="1"
+                max="99"
+                placeholder="–"
+                aria-label={field === "sets" ? `Sett for ${exercise.name || "øvelse"}` : `Reps for ${exercise.name || "øvelse"}`}
+                aria-invalid={isFieldInvalid || undefined}
+                aria-describedby={isFieldInvalid ? errorId : undefined}
+                value={exercise[field] || ""}
+                onChange={e => onChange({ [field]: e.target.value })}
+                style={{
+                  width: 40,
+                  height: 28,
+                  padding: "0 4px",
+                  background: "var(--cds-field-01)",
+                  border: `1px solid ${isFieldInvalid ? "var(--cds-support-error)" : "var(--cds-border-strong-01)"}`,
+                  color: isFieldInvalid ? "var(--cds-support-error)" : "var(--cds-text-primary)",
+                  fontFamily: "var(--cds-font-sans)",
+                  fontSize: 12,
+                  outline: "none",
+                  textAlign: "center",
+                }}
+              />
+              <span style={{ fontSize: 11, color: "var(--cds-text-secondary)" }}>
+                {field === "sets" ? "sett" : "reps"}
+              </span>
+              {isFieldInvalid && (
+                <span
+                  id={errorId}
+                  style={{ position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" }}
+                >
+                  Ugyldig antall – skriv inn 1 til 99
+                </span>
+              )}
+            </div>
+          );
+        })}
       </div>
 
       <Button
diff --git a/app/src/components/MusclePicker.jsx b/app/src/components/MusclePicker.jsx
index ffa3351..03ebfa4 100644
--- a/app/src/components/MusclePicker.jsx
+++ b/app/src/components/MusclePicker.jsx
@@ -24,7 +24,7 @@ function MusclePickerView({ view, primary, secondary, onToggle, instanceId }) {
         </pattern>
       </defs>
 
-      <g style={{ fill: "var(--cds-layer-02)", stroke: "var(--cds-border-subtle-01)" }} strokeWidth="0.6">
+      <g aria-hidden="true" style={{ fill: "var(--cds-layer-02)", stroke: "var(--cds-border-subtle-01)" }} strokeWidth="0.6">
         <circle cx="80" cy="21" r="17" />
         <polygon points="74,37 86,37 87,50 73,50" />
         <path d={BODY_PATH} />
@@ -66,7 +66,7 @@ function MusclePickerView({ view, primary, secondary, onToggle, instanceId }) {
           );
         })}
 
-      <text x="80" y="352" textAnchor="middle" fontSize="7.5"
+      <text aria-hidden="true" x="80" y="352" textAnchor="middle" fontSize="7.5"
         fontFamily="var(--cds-font-mono)" letterSpacing="2"
         style={{ fill: "var(--cds-text-secondary)" }}>
         {view === "front" ? "FRONT" : "BACK"}
@@ -92,16 +92,18 @@ export default function MusclePicker({ primary = [], secondary = [], onChange, i
     onChange({ primary: nextPrimary, secondary: nextSecondary });
   };
 
+  const helpId = `muscle-help-${instanceId}`;
+
   return (
     <div>
       <div style={{ display: "flex", gap: 4, marginBottom: 8, flexWrap: "wrap" }}>
         <Tag type="green" size="sm">Primær ({primary.length})</Tag>
         <Tag type="blue" size="sm">Sekundær ({secondary.length})</Tag>
-        <span style={{ fontSize: 11, color: "var(--cds-text-secondary)", alignSelf: "center", marginLeft: 4 }}>
+        <span id={helpId} style={{ fontSize: 11, color: "var(--cds-text-secondary)", alignSelf: "center", marginLeft: 4 }}>
           Klikk muskel: av → primær → sekundær → av
         </span>
       </div>
-      <div style={{ display: "flex", gap: 8 }}>
+      <div aria-describedby={helpId} style={{ display: "flex", gap: 8 }}>
         {["front", "back"].map(view => (
           <div key={view} style={{ flex: 1, background: "var(--cds-layer-01)", border: "1px solid var(--cds-border-subtle-01)", padding: "6px 4px" }}>
             <MusclePickerView