bug: A11y: Components ignore prefers-reduced-motion (carousel, loading, collapse, dropdown)

[QuickHarsh]

Reproduction URL (Required)

https://play.tailwindcss.com/7PTqWz1XeD

What version of daisyUI are you using?

5.5.5

Which browsers are you seeing the problem on?

Chrome

Describe your issue

Expected

When OS or browser requests reduced motion (prefers-reduced-motion: reduce):

• Loading indicators render a static visual (no movement).
• Collapse opens/closes without animated transitions.
• Dropdown opens/closes without fade/scale animation.
• Carousel does not smooth-scroll; snap still works.

Actual

• Loading animations continue to move (animated SVG masks).
• Collapse and dropdown animate transitions.
• Carousel uses smooth scrolling.
• This creates unnecessary motion for users who requested reduced motion.

Notes

• This seems component CSS-related (independent of framework/build tools).
• I can implement a minimal, CSS-only fix via targeted @media (prefers-reduced-motion: reduce) overrides.

[github-actions[bot]]

Thank you @QuickHarsh for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[QuickHarsh]

I’d like to take this issue and work on the fix. Please assign it to me when possible.

[pdanpdan]

• Loading indicators render a static visual (no movement) - they are animating (you are right)
• Collapse opens/closes without animated transitions - it works as expected (bad testing?)
• Dropdown opens/closes without fade/scale animation - it works as expected (bad testing?)
• Carousel does not smooth-scroll; snap still works - smooth scroll is not applied, it is the normal scroll of the browser

Have you checked the code?

[QuickHarsh]

Thanks for the quick review!

I re-checked everything and here’s what I found:

Loading

You’re absolutely right — the loading indicators continue to animate because the inline SVG masks use SMIL animations, and those aren’t affected by prefers-reduced-motion. I’ve prepared a minimal fix that swaps the animated mask-image with a static SVG when @media (prefers-reduced-motion: reduce) is active. The visuals stay the same, just without movement.

Collapse & Dropdown

After retesting, both components already handle reduced motion correctly by applying their transitions only under prefers-reduced-motion: no-preference. I’ll remove them from the issue so the scope stays clean.

Carousel

Confirmed — smooth scrolling is only enabled under no-preference. With reduced motion the browser uses normal scrolling, so behavior is already correct. My earlier override isn’t needed, so I’ll drop that too.

Updated plan

• Reduce the PR to only updating loading.css.
• Add a prefers-reduced-motion rule that swaps the animated mask with a static version.
• Keep the diff minimal and focused.

[pdanpdan]

And can you please eliminate the LLM texts from the conversion?

[QuickHarsh]

Test steps

• In DevTools, emulate prefers-reduced-motion=reduce (Chrome: Show Rendering panel).

• Compare current vs patched:

  • Before: loading-spinner/dots/ring/ball/bars/infinity keep animating.
  • After: same visuals, no motion.

[QuickHarsh]

And can you please eliminate the LLM texts from the conversion?

Acknowledged. I’ll remove non-technical/LLM-style text and keep the PR narrowly scoped.

Scope update: Only address prefers-reduced-motion for loading indicators by swapping animated mask-image SVGs with static equivalents under @media (prefers-reduced-motion: reduce). No changes to collapse, dropdown, or carousel (they already respect reduced motion or don’t need changes). I’ll update the PR description accordingly and keep the diff minimal.

[pdanpdan]

Don't forget to open the PR and to specify in the description the LLM version and API key you are using :)

[QuickHarsh]

Thanks for the note. For security and compliance reasons, I won’t include any API keys in the PR description. API keys must never be shared publicly.

Regarding “LLM version,” this PR is authored and reviewed by me. The description will focus on the technical change, rationale, and test steps per the project’s CONTRIBUTING guidelines. If you need any additional technical detail about the change itself, I’m happy to add it.

I’ll keep the PR narrowly scoped (loading.css only for prefers-reduced-motion), ensure the diff is minimal, and update the description accordingly.