feat: respect reduced motion in carousel animations

[sanketio]

Summary

Under prefers-reduced-motion: reduce, slide changes are instant and Autoplay / Auto Scroll do not start, including after interaction. Applied via Embla breakpoints, so it follows the setting live; save() output is unchanged.

Type of change

• Bug fix
• New feature
• Enhancement/refactor
• Documentation update
• Test update
• Build/CI/tooling

Related issue(s)

Closes #207

What changed

• embla-options.ts: withReducedMotion() adds the reduced-motion breakpoint to core or plugin options.
• view.ts: core duration: 0; Autoplay and Auto Scroll playOnInit: false, stopOnInteraction: true; isPlaying set from both plugins after init.
• viewport/edit.tsx: editor slide changes are instant too.
• docs/API.md, README.md, readme.txt: reduced-motion notes.

Breaking changes

• Yes — migration path:
• No

Testing

• Unit tests
• Manual testing
• Cross-browser testing (if UI changes)

Test details:

• npm run test:js, npm run lint:js, npm run lint:js:types, npm run lint:css, npm run build

How to test:

1. Add three carousels to a page: one with Autoplay, one with Auto Scroll, one with Fade transition + Autoplay.
2. Open the page, then DevTools → Cmd/Ctrl+Shift+P → "Rendering" → set "Emulate CSS media feature prefers-reduced-motion" to reduce.

• Nothing moves on its own, before or after a reload.
• Next/prev/dots jump to the slide with no slide or fade animation.
• Setting the emulation back to "No emulation" resumes Autoplay and Auto Scroll.
• With "Stop on interaction" off, drag the slides and release: nothing starts.
• In the editor, with the same emulation, selecting a slide jumps without animation.

Checklist

• I have self-reviewed this PR
• I have added/updated tests where needed
• I have updated docs where needed
• I have checked for breaking changes

[Copilot]

🟡 Changes recommended

Breakpoint ordering can allow another matching breakpoint to override the reduced-motion safeguards.

1 open finding

• Reduced-motion breakpoint can be overridden by later matching breakpoint · New

What changed in this PR

Adds reduced-motion support to carousel animations and automatic playback.

Changes:

• Applies reduced-motion overrides to frontend and editor Embla options.
• Prevents Autoplay and Auto Scroll from starting automatically.
• Adds tests and accessibility documentation.

File	Description
src/​blocks/​carousel/​viewport/​edit.tsx	Disables editor slide animation under reduced motion.
src/​blocks/​carousel/​view.ts	Configures frontend transitions and playback behavior.
src/​blocks/​carousel/​embla-options.ts	Adds the reduced-motion breakpoint helper.
src/​blocks/​carousel/​__tests__/​view.test.ts	Tests frontend reduced-motion options and state.
src/​blocks/​carousel/​__tests__/​embla-options.test.ts	Tests breakpoint construction and merging.
README.md	Documents reduced-motion support.
readme.txt	Updates plugin accessibility documentation.
docs/​API.md	Documents runtime reduced-motion behavior.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟢 Approval recommended

The implementation preserves existing options, handles breakpoint precedence, and includes focused coverage for the new behavior.

0 open findings

1 resolved since last review

• Reduced-motion breakpoint can be overridden by later matching breakpoint

🧠 Review effort: Balanced