Home / Companies / GitHub / Blog / Post Details
Content Deep Dive

How to make Storybook Interactions respect user motion preferences

Blog post from GitHub

Post Details
Company
Date Published
Author
Kendall Gassner
Word Count
845
Language
English
Hacker News Points
-
Summary

While exploring my company's Storybook, I encountered issues with the Storybook Interactions addon, which simulates user interactions and can cause disorienting flickering for users, especially those with motion sensitivities like photosensitive epilepsy or vertigo. The addon does not currently respect the prefers-reduced-motion setting available in some operating systems, leading to potentially harmful effects. To address this, I developed a custom Storybook addon that respects user motion preferences and allows users to toggle interactions on or off without altering their system settings. This addon ensures that interactions are off by default for users with prefers-reduced-motion enabled, promoting a more inclusive and accessible environment. The implementation involves storing user preferences in local storage and providing a toggle button in the Storybook toolbar for easy access and control.