The component library does not respect the "prefers reduced motion" flag

[dyeske61283]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Siemens iX makes broad use of smaller animations on many components.
There are two issues with that:

• There does not seem to be a central setting enable or disable animations (which is more of a general feature request)
• But more importantly: The "prefers reduced motion" flag does not seem to be respected

What type of frontend framework are you seeing the problem on?

Angular (NgModule)

On which version of the frontend framework are you experiencing the issue?

Angular V19.2.14

Which version of iX do you use?

v2.7.0

Code to produce this issue.

1. Create a small PoC with any animated iX component e.g. iX-Drawer
2. Open the Developer tools of your browser and open the animations viewer
3. Select or emulate the option to reduce motion in the developer tools or browser settings
4. Animations are still played

[danielleroux]

@dyeske61283 Thank for bringing up this point.

I tried to find the "reduce motion" settings in the dev tools but couldnt find it.

There are just these controls here:

[github-actions]

🤖 Hello @dyeske61283

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-3006

[github-actions]

This issue is labeled as Contribution welcome 👨‍💻 and is open for community contributions. The IX team has reviewed it and accepted it, though it doesn't have a set priority yet.
If you'd like to work on this, please leave a comment here to indicate your intention to submit a pull request. This will help us coordinate and ensure there's no duplicated effort.

Thanks for your contribution!

[dyeske61283]

@danielleroux Thank you for reacting so fast on this!
This is indeed not that easy to find 😅
There is two ways to find that:

1. The dev tools actually have a command palette, that you can use by pressing CMD/CTRL + P like in VS Code and then select "Emulate CSS prefers-reduced-motion: reduce"
2. In the top tab bar select the context menu with the three dots, then "More tools", then Rendering. There you will find a lot of the options to emulate certain preferences, like color theme, reduced motion, different color modes etc.

And to actually watch and analyze the animations you can use the "Animations" pane, wich is also selectable from the same "More tools" menu.

If there are any other questions for this issue, just tag me again. :)

PS:
A good starting resource on this whole topic of animation accessibility, I can recommend is https://motion.dev/docs/react-accessibility