Tag: Design Systems
8 posts
Replacing CSS Class Assertions with ARIA in Storybook
CSS classes break when Tailwind configs change. ARIA attributes are the semantic contract. Six rules for interaction tests that survive refactors.
Systematic prefers-reduced-motion Across a Component Library
Auditing every animated component for motion sensitivity reveals which animations are decorative and which need static alternatives.
Tooltip aria-describedby Was on the Wrong Element
A Tooltip component passed every test but put aria-describedby on a wrapper div instead of the trigger. Screen readers never announced it.
Aligning Five Form Components Around aria-describedby
Five form components, five approaches to displaying errors. One aria-describedby pattern turns inconsistency into a shared accessibility contract.
Making Data Tables Keyboard-Navigable
Adding scope, caption, clickable row keyboard support, and focus-visible to a Table component. The accessibility basics HTML tables need but rarely get.
Pause-on-Hover: Making Toast Notifications Respect the User
Adding aria-live regions and pause-on-hover to a Toast system. Screen readers and sighted users have conflicting timing needs.
Building an Accessible Dropdown Without a Library
Full ARIA menu semantics and keyboard navigation in ~150 lines of React, no Radix, no Headless UI, just the spec.
Removing focus-trap-react: Native Focus Management in Modals
Replacing a 15KB focus-trap dependency with native dialog behavior and manual focus management drops bundle size and simplifies the shared-ui library.