[ehcrea]

Requested by Eren · project thread

What was already fine

An axe-core scan (WCAG 2.0/2.1/2.2 A+AA + best practice) in both themes found only a heading-order issue. Text contrast passes, every form field has a label, <html lang> follows the language switch, and the "?" help opens on hover, focus and tap and closes on Escape. Animations only start when the user presses Animate, and with reduced motion turned on they step through still frames.

Fixes

• Theory help: it now closes once keyboard focus leaves the button and the panel. Before, tabbing past it left it open over the Save buttons (2.4.11 Focus Not Obscured). It is now a labelled region instead of a non-modal role="dialog".
• Text alternatives: the sketch container is role="img" with "Geometry sketch: {calculator}", and the not-to-scale note is wired up as its description. Charts are role="img" with a label that names the quantity and its range, e.g. "Chart: Deflection curve. δy from 0 to 457 µm over z from 0 to 100 mm."
• Non-text contrast: input, select and search borders now use a new --field-border token (3.1:1 or better in light, 3.7:1 or better in dark). The old border was about 1.3:1. A single :focus-visible ring in the accent colour now applies to every control.
• Keyboard and screen readers: added a skip link that keeps the URL hash, since the hash holds the inputs. Other changes: aria-current on the open calculator, aria-invalid on invalid inputs, unit and hint announced via aria-describedby, aria-label on the Report fields, the Saved dialog labelled by its heading, lang set on the language options, and Escape now closes the phone menu.
• Headings: sidebar group titles are now h2, and the help panel uses h3/h4.
• New texts are translated in de/nl/tr.

Testing

• npm test: 805 passed.
• Ran axe in light and dark on leaf spring, notch hinge, motion profile, beam bending, section, Hertz and materials, with the help panel open and closed: 0 violations.
• Checked in Playwright: the skip link is the first Tab stop, the help closes on tab-out and stays pinned on click, no horizontal scroll at 320 px, and the dark-mode focus ring is visible (screenshot checked).

---

Generated by Claude Code