Accessible Frontend Design System Lab
TYPESCRIPT · WAI-ARIA PRIMITIVES
Most portfolios show pages, which reveals nothing about whether the components underneath survive a second product or a keyboard user. This lab is standards-first: behaviour primitives and design tokens that outlive any one framework.
- Maintainer
- Pixy Puala
- Vertical
- Design systems · Accessibility
- Year
- 2026
- Role
- Open source
- Stack
- TypeScript (strict)
- Status
- ● Public repo
- Verified
- Source on GitHub
Problem
Component libraries fail at the same places every time — roving tabindex is missing, focus escapes a dialog, Escape does nothing, and the background stays reachable to a screen reader. These defects survive design review because they are invisible to a mouse. They need automated, per-pattern proof.
Constraints
Decisions
Standards over framework idioms
Each pattern implements the WAI-ARIA Authoring Practices directly in TypeScript with no framework dependency, so the same behaviour ships into React, WordPress blocks, or plain HTML without a rewrite.
axe-core is the floor, not the ceiling
Every pattern gets an automated WCAG A/AA scan in the test suite — and the README states plainly that automation cannot replace manual keyboard and screen-reader checks.
Malformed markup fails loudly
Tests cover what happens when a pattern is initialised against wrong markup. Silent no-ops are how inaccessible components ship unnoticed.
Build
Stack
- ▸ TypeScript (strict) · ESM build with .d.ts output
- ▸ Node 20+ · pnpm
- ▸ Vitest · jsdom
- ▸ axe-core automated WCAG A/AA scans
- ▸ CSS design tokens · WCAG AA contrast
- ▸ Roving tabindex · focus trap · inert background
Tooling
- ✓ kept pnpm · Vitest · axe-core · GitHub Actions
Results · Measured
Coverage spans ARIA state, keyboard behaviour, click, programmatic control, lifecycle and malformed-markup error handling, plus an axe-core scan per pattern.
Tradeoffs
WordPress block wrappers, a visual token playground and written screen-reader test transcripts are not built. Manual screen-reader verification is documented as outstanding rather than implied by the passing axe scans — an automated pass is not a conformance claim.