Skip to main content

Tag: Accessibility

8 posts

Posts

Two dark rounded UI badges side by side on a soft neutral surface, the left a clean deep red and the right a muddier maroon gradient

Test the tokens you demo, not just the ones you ship

A jest test guarded WCAG contrast on my shipped theme. Storybook rendered a second stylesheet it never parsed, and the demo had drifted to 4.53:1.

3 min read
A grid of color swatches, each labeled with its WCAG contrast ratio, several flagged as failing

Unit-testing design tokens for WCAG contrast

Manual review flagged three contrast issues. A jest test that parses the theme CSS found nine, including a 2.54:1 that had shipped.

3 min read
Checklist with green checkmarks on a clipboard

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.

3 min read
A sunrise and sunset gradient on the horizon

Cycling Theme Toggle: From Radio Group to Single Button

Replacing a three-button theme picker with a single cycling button and a keyboard shortcut reclaims nav space without losing discoverability.

2 min read
Two puzzle pieces fitting together on a clean surface

Fixing Hydration Mismatches Without Suppressing Them

A three-line useSyncExternalStore hook helps server and client renders agree, no more suppressHydrationWarning.

2 min read
A layered architectural structure showing different levels

Z-Index Choreography for a Mobile Bottom Nav

The z-index choreography behind adding a fixed bottom bar without breaking scroll-to-top, table-of-contents, and bottom sheet overlays.

2 min read
A close-up of a keyboard with a glowing focus indicator

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.

1 min read
A clean desk with an open notebook showing a table of contents

Building an Auto-Generated Table of Contents with Scroll Spy

Extracting headings from rendered MDX, tracking reading position with IntersectionObserver, and adapting between a sticky sidebar and a mobile bottom sheet.

3 min read