Skip to main content

Tag: Accessibility

6 posts

Posts
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.

2 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