a11y-fixeslisted

# Accessibility Fix Patterns How to resolve specific axe-core violations in this project. Violations come from `test/a11y.ts` (Vitest), `.playwright/a11y.ts` (Playwright), or the `code-review-audit` agent's a11y bucket. General a11y guidance lives in `.claude/rules/accessibility.md`. ## color-contrast WCAG AA requires 4.5:1 for normal text, 3:1 for large text. Use the project's semantic Tailwind tokens (see `.claude/rules/tailwind.md`) instead of arbitrary palette colors, they pair light/dark modes correctly. ```tsx // BAD, fails contrast in dark mode, raw colors <p className="text-gray-400 bg-white">Status</p> // GOOD, semantic tokens, contrast-safe in both modes <p className="text-body bg-body">Status</p> ``` ## label Form inputs need an associated `<label>`. Use GAIA's `Field` wrapper from `~/components/Form/Field` rather than a bare `<label>`, it wires `htmlFor`, error text, and description automatically. See the `form-components.md` audit extension. ```tsx // BAD, bare input with no label association <input type="text" name="email" /> // GOOD, Field wraps a project input with the right wiring <Field type="input" name="email" label={t('email')}> <InputText name="email" /> </Field> ``` ## label-title-only `title` attributes are not labels, screen readers and mobile devices ignore them. Use `aria-label` or a real `<label>`. ```tsx // BAD, title is not an accessible name <input type="text" title="Search" /> // GOOD, aria-label provides the accessible name <in