Emulate media in storybook tests

[iamallyniam]

Is your feature request related to a problem? Please describe.

I have code in components that'll only run if the user has set their preference to reduced motion in the OS. In playwright we have emulateMedia, that allows us to set the test to work as though someone has set their preference for reduced animation. Can this work in Storybook interaction tests? I realise these run in the browser where there's no browser API to emulate this for us. I've seen addons that will emulate user preferences in stories, but they're not optimised for Storybook 10.

Describe the solution you'd like

Ideally, I'd like to be able to set at a story level a media emulation

export const AutoplayWithReducedMotion = {
	args: gifVideo,
	parameters: {
		...workItemParams,
		emulateMedia: { media: 'prefers-reduced-motion' } // matches playwright behaviour
	}
}

Describe alternatives you've considered

Exposing the page from playwright, or browser equivalent? This might be more difficult given the context the test is running in

export const AutoplayWithReducedMotion = {
	args: gifVideo,
	parameters: {
		...workItemParams,
	},
	play : (page) => {
		page.emulateMedia({ media: 'prefers-reduced-motion' })
	}
}

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response