TechPrufer
Get started
GitHub
GitHub logoGitHub · Feature trail

Storybook Interaction Accessibility Controls

2 posts · Jul 2024 – Nov 2024

What this trail covers

This feature thread tracks the evolution of making Storybook more accessible, specifically focusing on user interaction controls. Initially, Storybook Interactions could be disorienting and ignored user motion preferences. This post details the development of a custom Storybook addon that allows users to toggle interactions on or off, respecting the OS-level `prefers-reduced-motion` setting by default. This ensures a more inclusive experience for users sensitive to motion. The team also added functionality to check user preferences and ensure interactions are off by default for users with reduced motion enabled.

All GitHub trails
  1. How to make Storybook Interactions respect user motion preferencesThis post details the development of a custom Storybook addon to respect the `prefers-reduced-motion` CSS media feature. It introduces a toggle button in the Storybook toolbar that uses `window.localStorage` to store user preferences. The addon checks for the `prefers-reduced-motion` setting on initial load and defaults interactions to off if the preference is not set. A `shouldInteractionPlay` function is provided to conditionally enable interactions in story play functions. The implementation involves creating a new addon, registering it in the manager.ts file, and adding the conditional logic to story play functions.
  2. Exploring the challenges in creating an accessible sortable list (drag-and-drop)This post details the engineering challenges and solutions for creating an accessible one-dimensional drag-and-drop sortable list. Key contributions include: overriding screen reader arrow key navigation using `role='application'` with careful scoping and dynamic application/removal; separating keyboard and mouse event handling by using a Primer Icon button and an invisible overlay to manage NVDA's simulated mouse events; implementing a 100ms debounce with `aria-live='assertive'` for rapid movement announcements to prevent lag and disorientation; providing an instructional dialog with a 'don't show again' option for first-time keyboard users; and introducing a 'move dialog' with action and position inputs, including a preview, to support voice control and provide an alternative to traditional drag-and-drop for users who prefer it.