Setting `cds-motion="off"` in `CdsSelect` doesn't turn off `cds-button-expand` animation

[squidjam]

Describe the bug

Setting cds-motion to off on CdsSelect (react) doesn't turn off the inner cds-button-expand's animation, making it so that visual regression testing doesn't pass.

How to reproduce

Steps to reproduce the behavior:

Expected behavior

If any parent component has a setting to turn off animation, this should be passed along to the child components too. Alternatively, a mechanism should be provided to override this behavior.

Versions

Clarity project:

• [x] Clarity Core
• [ ] Clarity Angular/UI

Clarity version:

• [ ] v5.x
• [x] v6.x

Framework:

• [ ] Angular
• [x] React
• [ ] Vue
• [x] Other: VanillaJS

Framework version: React 18

Device:

• Type: Windows laptop
• OS: Windows
• Browser: Chrome
• Version latest

Additional notes

[squidjam]

The way I'm starting to look at this gets me to think that perhaps all animations should be disabled (or set at least to --cds-global-animation-duration-instant) when on @media (prefers-reduced-motion).

This would give developers using the design system a chance to have automated visual regression testing never fail due to animations.

As an added bonus, those of us who have the setting up would benefit from this already as an accessibility feature.

[squidjam]

plink