Skip to content

feat: accessibility testing suite + fix 5 WCAG AA contrast failures#57

Merged
kryptodrex merged 4 commits intov.0.4.0from
copilot/add-ui-focused-component-testing-suite
Mar 18, 2026
Merged

feat: accessibility testing suite + fix 5 WCAG AA contrast failures#57
kryptodrex merged 4 commits intov.0.4.0from
copilot/add-ui-focused-component-testing-suite

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 18, 2026

No accessibility-targeted tests existed. This adds WCAG 2.1 color-contrast validation, automated axe-core component audits, and keyboard/ARIA interaction tests — and fixes the real contrast failures those tests uncovered in the light theme.

CSS fixes (5 WCAG AA violations)

Token Before After Ratio
--alert-error-text on #fef2f2 #dc2626 #b91c1c 4.41 → 5.91
--alert-warning-text on #fffbeb #d97706 #92400e 3.07 → 6.84
--alert-success-text on #f0fdf4 #16a34a #166534 3.15 → 6.81
White on toast-success-bg #10b981 (light) white #111827 2.54 → 6.99
White on toast-warning-bg #f59e0b (light) white #111827 2.15 → 8.26

Dark theme already passed; no dark-mode changes needed.

New: src/test/colorContrast.ts

WCAG 2.1 utility library — relativeLuminance, contrastRatio, meetsWcagAA/AAA, and the WCAG threshold constants. No dependencies; pure algorithm.

New: src/test/colorContrast.test.ts — 57 tests

  • Algorithm unit tests (sRGBToLinear, hexToRgb, relativeLuminance, contrastRatio, meetsWcagAA)
  • 9 spot-check ratio assertions keyed to known values (regression guard)
  • Every design-token foreground/background pair for both light and dark themes, each asserted at the appropriate AA threshold (4.5:1 normal text, 3:1 large text / UI components)

New: src/test/accessibility.test.tsx — 68 tests

Three layers:

  1. Automated axe-core audits — all 17 shared components rendered and checked with toHaveNoViolations()
  2. Semantic / ARIArole="status", aria-live="polite", heading levels, label association, name grouping on radio groups, required indicators
  3. Keyboard interaction — Escape dismissal (Modal, ConfirmDialog, ErrorDialog), Enter/Space activation (Button, Toggle, PillToggle, ViewModeSelector), ArrowDown navigation (RadioGroup), overlay-click dismissal
it('fires onChange when ArrowDown moves to the next radio option', async () => {
  render(<RadioGroup name="letters" value="a" options={options} onChange={vi.fn()} />);
  screen.getByLabelText('Alpha').focus();
  await userEvent.keyboard('{ArrowDown}');
  expect(screen.getByLabelText('Beta')).toHaveFocus();
});

Infrastructure

  • src/test/setup.ts — registers jest-axe toHaveNoViolations matcher via expect.extend
  • src/test/jest-axe.d.ts — vitest Matchers augmentation for toHaveNoViolations (avoids pulling in @types/jest-axe which carries a conflicting jest type reference)

💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.

…ary/react

- Install @testing-library/react, @testing-library/user-event, jsdom, @testing-library/jest-dom
- Add vitest.config.ts with jsdom environment and jest-dom setup
- Add src/test/setup.ts for global test setup
- Add 17 new component test files covering all shared UI primitives:
  - Button, Toggle, PillBadge, PillToggle, RadioGroup, FormGroup, FormattedNumberInput (controls)
  - Alert, Toast, InfoBox, ProgressBar, ConfirmDialog, ErrorDialog (feedback)
  - Modal, Banner, PageHeader, ViewModeSelector (layout)
- All 278 tests pass (167 new component tests + 111 existing)"

Co-authored-by: kryptodrex <25872870+kryptodrex@users.noreply.github.com>
Copilot AI changed the title [WIP] Add comprehensive UI-focused component testing suite feat: add comprehensive UI component testing suite Mar 18, 2026
Copilot AI requested a review from kryptodrex March 18, 2026 01:19
Copilot AI and others added 2 commits March 18, 2026 01:36
Co-authored-by: kryptodrex <25872870+kryptodrex@users.noreply.github.com>
…ts, keyboard/ARIA tests

- Fix 5 WCAG AA color-contrast failures in light theme (index.css + Toast.css)
- Add src/test/colorContrast.ts: WCAG 2.1 utility functions
- Add src/test/colorContrast.test.ts: 57 tests covering algorithm + all design token pairs
- Add src/test/accessibility.test.tsx: 68 tests covering axe audits, ARIA, keyboard nav
- Update src/test/setup.ts: register jest-axe toHaveNoViolations matcher
- Add src/test/jest-axe.d.ts: vitest type augmentation for jest-axe"

Co-authored-by: kryptodrex <25872870+kryptodrex@users.noreply.github.com>
Copilot AI changed the title feat: add comprehensive UI component testing suite feat: accessibility testing suite + fix 5 WCAG AA contrast failures Mar 18, 2026
@github-actions
Copy link
Copy Markdown

Version File Not Updated

The version file was not modified in this PR. Please update the version file in the root directory with the new version number.

@kryptodrex kryptodrex changed the base branch from develop to v.0.4.0 March 18, 2026 01:53
@kryptodrex kryptodrex merged commit 7e20bcf into v.0.4.0 Mar 18, 2026
0 of 3 checks passed
@kryptodrex kryptodrex deleted the copilot/add-ui-focused-component-testing-suite branch March 20, 2026 22:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants