Implement ARIA snapshot approval tests for key UI components

[kvithayathil]

Goal

Write ARIA snapshot approval tests for core UI components using Vitest browser mode.

Context

Parent: #119 (Frontend approval/snapshot testing infrastructure)
Depends on: #116 (Browser mode setup)

ARIA snapshots capture the accessibility tree, which is inherently immune to CSS class changes, attribute reordering, and DOM restructuring. They test semantic structure — roles, labels, heading levels — not markup.

Why ARIA Snapshots Over HTML Snapshots

Concern	HTML Snapshot	ARIA Snapshot
Scoped CSS classes	Noisy, needs scrubbing	Ignored (not in a11y tree)
Attribute ordering	Fragile	Irrelevant
DOM restructuring	Brittle	Stable (same a11y tree)
Accessibility regressions	Not caught	Caught directly
Regex patterns for dynamic content	Manual scrubbing	Native support (/pattern/)
--update preserves patterns	No	Yes

Tasks

• Identify priority components for ARIA snapshot coverage (start with forms, navigation, modals, data tables)
• Write toMatchAriaInlineSnapshot tests for each
• Use regex patterns for dynamic content (user names, dates, counts)
• Use /children: contain (default) for flexible matching where appropriate
• Add to CI browser mode test run

Acceptance Criteria

• ARIA snapshot tests exist for top 5-10 core components
• Tests pass in CI (browser mode)
• Tests use regex patterns for dynamic values — no false failures
• Snapshots are reviewed in PR diff (inline snapshots preferred for readability)

Example

import { expect, test } from 'vitest'
import { page } from 'vitest/browser'

test('navigation structure', async () => {
  await expect.element(page.getByRole('navigation')).toMatchAriaInlineSnapshot(`
    - navigation "Main":
      - link "Home":
        - /url: /
      - link "Elections":
        - /url: /elections
      - link "About":
        - /url: /about
  `)
})