A naukri.com initiative
Github
1M
223
Image Credit: Github
How to make Storybook Interactions respect user motion preferences
- The open source tool Storybook Interactions can be a powerful tool, enabling developers to simulate and test user behaviors quickly. But if you’re unfamiliar with Interactions the simulated tests jumping around on the screen can feel disorienting.
- This can be especially jarring for users who have the prefers-reduced-motion setting enabled in their operating system. When these users encounter a story that includes an interaction, their preferences are ignored and they have no option to disable or enable it.
- At this time, Storybook does not have built-in capabilities to toggle interactions on or off. Until this feature can be baked in this blog will provide you with an alternative way to make your work environment more inclusive.
- This addon stores user preferences for Interactions using window.localStorage. When the addon first loads, it checks whether the preference is already set and, if so, it defaults to the user’s preference.
- When a user clicks the toggle button, preferences are updated and the page is refreshed to reflect the changes.
- With this custom addon, you can ensure your workplace remains accessible to users with motion sensitivities while benefiting from Storybook’s Interactions. For those with prefers-reduced-motion enabled, motion will be turned off by default and all users will be able to toggle interactions on or off.
- This explicit preference for a reduced motion experience can be used by browsers, applications, and websites to reduce unnecessary animations and motions.
- Interactions can be turned off by default for users with prefers-reduced-motion enabled and all users will be able to toggle interactions on or off with the custom addon.
- Users with prefers-reduced-motion enabled must have a way to toggle the feature on or off without altering their operating system user preferences.
- The Storybook Interaction can cause disorientation for users or in some cases can even trigger a seizure.
Read Full Article
13 Likes
For uninterrupted reading, download the app