How to make Storybook Interactions respect user motion preferences
Blog post from GitHub
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.