From 2de8e28879263a70607722c29f4ed9f066894004 Mon Sep 17 00:00:00 2001
From: Christopher Rotnes <christopher.rotnes@obos.no>
Date: Sun, 3 May 2026 18:00:44 +0200
Subject: [PATCH] a11y: add SVG role/aria-label and semantic table for muscle
 frequency

- BodySVG: add role="img" and aria-label listing primary muscles per view
- HeatmapBodySVG: add role="img" and aria-label identifying view
- Report.jsx: convert muscle frequency from div layout to <table> with
  thead/tbody/th(scope)/td so screen readers can navigate by row/column

Closes #74, #78

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/src/components/Report.jsx | 92 +++++++++++++++++++----------------
 app/src/lib/bodymap.jsx       |  4 ++
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/app/src/components/Report.jsx b/app/src/components/Report.jsx
index 0abfe01..6e74a49 100644
--- a/app/src/components/Report.jsx
+++ b/app/src/components/Report.jsx
@@ -387,48 +387,56 @@ export default function Report({ onShowHome, onShowLogger, onShowHistory, onShow
               )}
 
               <div style={{ background: "var(--cds-layer-01)", border: "1px solid var(--cds-border-subtle-01)", padding: 14 }}>
-                <p style={{ ...labelStyle, marginBottom: 8 }}>Muskelfrekvens</p>
-                <div style={{ display: "flex", alignItems: "center", gap: 10, paddingBottom: 6, borderBottom: "1px solid var(--cds-border-strong-01)", marginBottom: 2 }}>
-                  <span style={{ fontSize: 10, color: "var(--cds-text-secondary)", width: 140, flexShrink: 0, fontFamily: "var(--cds-font-mono)", letterSpacing: "1px" }}>MUSKEL</span>
-                  <div style={{ flex: 1 }} />
-                  <span style={{ fontSize: 10, color: "var(--cds-text-secondary)", fontFamily: "var(--cds-font-mono)", width: 36, textAlign: "right", flexShrink: 0, letterSpacing: "1px" }}>ØKT</span>
-                  <span style={{ fontSize: 10, color: "var(--cds-text-secondary)", fontFamily: "var(--cds-font-mono)", width: 40, textAlign: "right", flexShrink: 0, letterSpacing: "1px" }}>SETT</span>
-                </div>
-                {frequencyTable.map(({ id, primary, secondary }) => {
-                  const barWidth = maxPrimaryCount > 0 ? (primary / maxPrimaryCount) * 100 : 0;
-                  const countColor = primary > 0
-                    ? "var(--cds-text-primary)"
-                    : secondary > 0
-                    ? "#4589ff"
-                    : "var(--cds-text-disabled)";
-                  const countLabel = primary > 0
-                    ? String(primary)
-                    : secondary > 0
-                    ? `(${secondary})`
-                    : "—";
-                  return (
-                    <div key={id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "6px 0", borderBottom: "1px solid var(--cds-border-subtle-01)" }}>
-                      <span style={{ fontSize: 12, color: "var(--cds-text-primary)", width: 140, flexShrink: 0 }}>
-                        {muscleExercises[id]?.size > 0 ? (
-                          <DefinitionTooltip definition={[...muscleExercises[id]].join(", ")} openOnHover align="bottom">
-                            {MUSCLES[id]?.label || id}
-                          </DefinitionTooltip>
-                        ) : MUSCLES[id]?.label || id}
-                      </span>
-                      <div style={{ flex: 1, height: 6, background: "var(--cds-layer-02)" }}>
-                        {primary > 0 && (
-                          <div style={{ height: "100%", width: `${barWidth}%`, background: "var(--heat-4)" }} />
-                        )}
-                      </div>
-                      <span style={{ fontSize: 11, color: countColor, fontFamily: "var(--cds-font-mono)", width: 36, textAlign: "right", flexShrink: 0 }}>
-                        {countLabel}
-                      </span>
-                      <span style={{ fontSize: 11, color: "var(--cds-text-secondary)", fontFamily: "var(--cds-font-mono)", width: 40, textAlign: "right", flexShrink: 0 }}>
-                        {muscleVolume[id] > 0 ? muscleVolume[id] : "—"}
-                      </span>
-                    </div>
-                  );
-                })}
+                <p style={{ ...labelStyle, marginBottom: 8 }} id="freq-table-label">Muskelfrekvens</p>
+                <table aria-labelledby="freq-table-label" style={{ width: "100%", borderCollapse: "collapse", tableLayout: "fixed" }}>
+                  <thead>
+                    <tr style={{ borderBottom: "1px solid var(--cds-border-strong-01)" }}>
+                      <th scope="col" style={{ fontSize: 10, color: "var(--cds-text-secondary)", fontFamily: "var(--cds-font-mono)", letterSpacing: "1px", textAlign: "left", paddingBottom: 6, width: 140 }}>MUSKEL</th>
+                      <th scope="col" aria-label="Frekvensbar" style={{ width: "100%" }} />
+                      <th scope="col" style={{ fontSize: 10, color: "var(--cds-text-secondary)", fontFamily: "var(--cds-font-mono)", letterSpacing: "1px", textAlign: "right", paddingBottom: 6, width: 36 }}>ØKT</th>
+                      <th scope="col" style={{ fontSize: 10, color: "var(--cds-text-secondary)", fontFamily: "var(--cds-font-mono)", letterSpacing: "1px", textAlign: "right", paddingBottom: 6, width: 40 }}>SETT</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {frequencyTable.map(({ id, primary, secondary }) => {
+                      const barWidth = maxPrimaryCount > 0 ? (primary / maxPrimaryCount) * 100 : 0;
+                      const countColor = primary > 0
+                        ? "var(--cds-text-primary)"
+                        : secondary > 0
+                        ? "#4589ff"
+                        : "var(--cds-text-disabled)";
+                      const countLabel = primary > 0
+                        ? String(primary)
+                        : secondary > 0
+                        ? `(${secondary})`
+                        : "—";
+                      return (
+                        <tr key={id} style={{ borderBottom: "1px solid var(--cds-border-subtle-01)" }}>
+                          <td style={{ fontSize: 12, color: "var(--cds-text-primary)", padding: "6px 0" }}>
+                            {muscleExercises[id]?.size > 0 ? (
+                              <DefinitionTooltip definition={[...muscleExercises[id]].join(", ")} openOnHover align="bottom">
+                                {MUSCLES[id]?.label || id}
+                              </DefinitionTooltip>
+                            ) : MUSCLES[id]?.label || id}
+                          </td>
+                          <td style={{ padding: "6px 10px" }}>
+                            <div style={{ height: 6, background: "var(--cds-layer-02)" }}>
+                              {primary > 0 && (
+                                <div style={{ height: "100%", width: `${barWidth}%`, background: "var(--heat-4)" }} />
+                              )}
+                            </div>
+                          </td>
+                          <td style={{ fontSize: 11, color: countColor, fontFamily: "var(--cds-font-mono)", textAlign: "right", padding: "6px 0" }}>
+                            {countLabel}
+                          </td>
+                          <td style={{ fontSize: 11, color: "var(--cds-text-secondary)", fontFamily: "var(--cds-font-mono)", textAlign: "right", padding: "6px 0" }}>
+                            {muscleVolume[id] > 0 ? muscleVolume[id] : "—"}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
               </div>
 
               {sessionCount > 0 && (
diff --git a/app/src/lib/bodymap.jsx b/app/src/lib/bodymap.jsx
index 0ac3e66..cc8ffea 100644
--- a/app/src/lib/bodymap.jsx
+++ b/app/src/lib/bodymap.jsx
@@ -145,6 +145,8 @@ export function HeatmapBodySVG({ view, counts = {}, maxCount = 1, exerciseMap =
   return (
     <div ref={wrapRef} style={{ position: "relative", width: "100%" }}>
       <svg viewBox="0 0 160 360" xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-label={`Treningsfrekvenskart, ${view === "front" ? "fremside" : "bakside"}`}
         style={{ width: "100%", height: "auto", display: "block" }}>
         <defs>
           <pattern id={`sec-stripe-${view}`} patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45 0 0)">
@@ -271,6 +273,8 @@ export function BodySVG({ view, primary, secondary, muscleMap = {} }) {
   return (
     <div ref={wrapRef} style={{ position: "relative", width: "100%" }}>
       <svg viewBox="0 0 160 360" xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-label={`Muskelkart, ${view === "front" ? "fremside" : "bakside"}. Primære: ${[...pSet].map(id => MUSCLES[id]?.label).filter(Boolean).join(", ") || "ingen"}.`}
         style={{ width: "100%", height: "auto", display: "block" }}>
         <defs>
           <pattern id={`sec-stripe-${view}`} patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45 0 0)">