{"id":1471,"date":"2024-11-26T06:26:14","date_gmt":"2024-11-26T06:26:14","guid":{"rendered":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2024\/11\/26\/how-to-make-storybook-interactions-respect-user-motion-preferences\/"},"modified":"2024-11-26T06:26:14","modified_gmt":"2024-11-26T06:26:14","slug":"how-to-make-storybook-interactions-respect-user-motion-preferences","status":"publish","type":"post","link":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/2024\/11\/26\/how-to-make-storybook-interactions-respect-user-motion-preferences\/","title":{"rendered":"How to make Storybook Interactions respect user motion preferences"},"content":{"rendered":"

Recently, while browsing my company\u2019s Storybook<\/a>, I came across something that seemed broken: a flickering component that appeared to be re-rendering repeatedly. The open source tool that helps designers, developers, and others build and use reusable components was behaving weirdly. As I dug in, I realized I was seeing the unintended effects of the Storybook Interactions addon<\/a>, which allows developers to simulate user interactions within a story, in action.<\/p>\n

Storybook Interactions can be a powerful tool, enabling developers to simulate and test user behaviors quickly. But if you\u2019re unfamiliar with Interactions\u2014especially if you\u2019re just looking to explore available components\u2014the simulated tests jumping around on the screen can feel disorienting.<\/p>\n

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. Instead, the Storybook Interaction immediately plays on page load, regardless. These rapid screen movements can cause disorientation for users or in some cases can even trigger a seizure.<\/p>\n

Knowledge share<\/p>\n

Operating systems allow users to set a motion preference. Adhering to this setting can be critical for some users. For example, for users who have photosensitive epilepsy or vertigo, even a small animation can be life-threatening.<\/p>\n

This explicit preference for a reduced motion experience can be used by browsers, applications, and websites to reduce unnecessary animations and motions via the prefers-reduced-motion CSS media feature<\/a>.<\/p>\n

At this time, Storybook does not have built-in capabilities to toggle interactions on or off. Until this feature can be baked in I am hoping this blog will provide you with an alternative way to make your work environment more inclusive. Now, let\u2019s get into building an addon that respects user\u2019s motion preferences and allows users to toggle interactions on and off.<\/p>\n

Goals<\/a><\/h2>\n

Users with prefers-reduced-motion enabled MUST<\/strong> have interactions off by default.
\nUsers with prefers-reduced-motion enabled MUST<\/strong> have a way to toggle the feature on or off without altering their operating system user preferences.
\nAll users SHOULD<\/strong> have a way to toggle the feature on or off without altering their user preferences.<\/p>\n

Let\u2019s get started<\/a><\/h2>\n

Step 1: Build a Storybook addon<\/a><\/h3>\n

Storybook allows developers to create custom addons<\/a>. In this case, we will create one that will allow users to toggle Interactions on or off, while respecting the prefers-reduced-motion setting.<\/p>\n

Add the following code to a file in your project\u2019s .storybook folder:<\/p>\n

import React, {useCallback, useEffect} from ‘react’<\/p>\n

import {IconButton} from ‘@storybook\/components’
\nimport {PlayIcon, StopIcon} from ‘@storybook\/icons’<\/p>\n

export const ADDON_ID = ‘toggle-interaction’
\nexport const TOOL_ID = `${ADDON_ID}\/tool`<\/p>\n

export const INTERACTION_STORAGE_KEY = ‘disableInteractions’<\/p>\n

export const InteractionToggle = () => {
\n const [disableInteractions, setDisableInteractions] = React.useState(
\n window?.localStorage.getItem(INTERACTION_STORAGE_KEY) === ‘true’,
\n )<\/p>\n

useEffect(() => {
\n const reducedMotion = matchMedia(‘(prefers-reduced-motion)’)<\/p>\n

if (window?.localStorage.getItem(INTERACTION_STORAGE_KEY) === null && reducedMotion.matches) {
\n window?.localStorage?.setItem(INTERACTION_STORAGE_KEY, ‘true’)
\n setDisableInteractions(true)
\n }
\n }, [])<\/p>\n

const toggleMyTool = useCallback(() => {
\n window?.localStorage?.setItem(INTERACTION_STORAGE_KEY, `${!disableInteractions}`)
\n setDisableInteractions(!disableInteractions)
\n \/\/ Refreshes the page to cause the interaction to stop\/start
\n window.location.reload()
\n}, [disableInteractions, setDisableInteractions])<\/p>\n

return (
\n <IconButton
\n key={TOOL_ID}
\n aria-label=”Disable Interactions”
\n onClick={toggleMyTool}
\n defaultChecked={disableInteractions}
\n aria-pressed={disableInteractions}
\n >
\n {disableInteractions ? <PlayIcon \/> : <StopIcon \/>}
\n Interactions
\n <\/IconButton>
\n )
\n}<\/p>\n

Code breakdown<\/a><\/h4>\n

This addon stores user preferences for Interactions using window.localStorage<\/a>. When the addon first loads, it checks whether the preference is already set and, if so, it defaults to the user\u2019s preference.<\/p>\n

const [disableInteractions, setDisableInteractions] = React.useState(
\n window?.localStorage.getItem(INTERACTION_STORAGE_KEY) === ‘true’,
\n )<\/p>\n

This useEffect<\/a> hook checks if a user has their motion preferences set to prefers-reduced-motion and ensures that Interactions are turned off if the user hasn\u2019t already set a preference in Storybook.<\/p>\n

useEffect(() => {
\n const reducedMotion = matchMedia(‘(prefers-reduced-motion)’)<\/p>\n

if (window?.localStorage.getItem(INTERACTION_STORAGE_KEY) === null && reducedMotion.matches) {
\n window?.localStorage?.setItem(INTERACTION_STORAGE_KEY, ‘true’)
\n setDisableInteractions(true)
\n }
\n }, [])<\/p>\n

When a user clicks the toggle button, preferences are updated and the page is refreshed to reflect the changes.<\/p>\n

const toggleMyTool = useCallback(() => {
\n window?.localStorage?.setItem(INTERACTION_STORAGE_KEY, `${!disableInteractions}`)
\n setDisableInteractions(!disableInteractions)
\n \/\/ Refreshes the page to cause the interaction to stop\/start
\n window.location.reload()
\n }, [disableInteractions, setDisableInteractions])<\/p>\n

Step 2: Register your new addon with Storybook<\/a><\/h3>\n

In your .storybook\/manager<\/a> file, register your new addon:<\/p>\n

addons.register(ADDON_ID, () => {
\n addons.add(TOOL_ID, {
\n title: ‘toggle interaction’,
\n type: types.TOOL as any,
\n match: ({ viewMode, tabId }) => viewMode === ‘story’ && !tabId,
\n render: () => <InteractionToggle \/>,
\n })
\n})<\/p>\n

This adds the toggle button to the Storybook toolbar, which will allow users to change their Storybook Interaction preferences.<\/p>\n

Step 3: Add functionality to check user preferences<\/a><\/h3>\n

Finally, create a function that checks whether Interactions should be played and add it to your interaction stories:<\/p>\n

import {INTERACTION_STORAGE_KEY} from ‘.\/.storybook\/src\/InteractionToggle’<\/p>\n

export const shouldInteractionPlay = () => {
\n const disableInteractions = window?.localStorage?.getItem(INTERACTION_STORAGE_KEY)
\n return disableInteractions === ‘false’ || disableInteractions === null
\n}<\/p>\n

export const SomeComponentStory = {
\n render: SomeComponent,
\n play: async ({context}) => {
\n if (shouldInteractionPlay()) {
\n…
\n }
\n })
\n }<\/p>\n

Wrap-up<\/a><\/h2>\n

With this custom addon, you can ensure your workplace remains accessible to users with motion sensitivities while benefiting from Storybook\u2019s 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.<\/p>\n

The post How to make Storybook Interactions respect user motion preferences<\/a> appeared first on The GitHub Blog<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

Recently, while browsing my company\u2019s Storybook, I came across something that seemed broken: a flickering component that appeared to be […]<\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[8],"tags":[],"class_list":["post-1471","post","type-post","status-publish","format-standard","hentry","category-github-engineering"],"_links":{"self":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/1471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/comments?post=1471"}],"version-history":[{"count":0,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/posts\/1471\/revisions"}],"wp:attachment":[{"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/media?parent=1471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/categories?post=1471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rssfeedtelegrambot.bnaya.co.il\/index.php\/wp-json\/wp\/v2\/tags?post=1471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}