Mixins reduced-motion / allows-motion

[cedric07]

Helpers SCSS pour conditionner les styles via les classes de préférence d’animation sur le document, plutôt que via prefers-reduced-motion directement en CSS.

Source : _m-reduced-motion.scss

Pourquoi des classes plutôt que @media ?

<html> démarre avec no-js-animation et peut passer à js-animation via un script inline précoce (header.php). Le même couple de classes peut aussi être basculé par le plugin a11y access-config (choix utilisateur), indépendamment du réglage OS.

Les classes unifient CSS, JS (Animation.js) et le plugin sur une seule source de vérité :

Classe sur <html>	Signification
js-animation	Animations autorisées
no-js-animation	Mouvement réduit (préférence OS, override plugin, ou hash #no-js-animation)

Comment la classe est définie

1. Markup par défaut : <html class="no-js no-js-animation">
2. Script inline dans header.php :
   • remplace no-js → js
   • remplace no-js-animation → js-animation uniquement si :
     • prefers-reduced-motion: reduce n’est pas détecté, et
     • le hash de l’URL ne contient pas no-js-animation
3. Optionnel : le plugin a11y access-config peut forcer l’une ou l’autre classe ensuite

Raccourci QA : ajouter #no-js-animation à l’URL pour forcer le mode mouvement réduit.

API

@use "../02-tools/m-reduced-motion" as *;

// Styles lorsque le mouvement est réduit
@include reduced-motion { ... }

// Styles lorsque les animations sont autorisées
@include allows-motion { ... }

Appel	Sélecteur compilé
@include reduced-motion { ... }	html.no-js-animation …
@include allows-motion { ... }	html.js-animation …

Sans sélecteur parent (@include à la racine / sans &), le mixin émet html.#{$class} { … }.
À l’intérieur d’un sélecteur, il émet html.#{$class} & { … } pour conserver le contexte courant sous la classe html.

L’intention a11y reste dans les noms de mixins ; le mécanisme (js-animation / no-js-animation) reste côté HTML / JS / plugin.

Exemples

Override global / token (usage actuel)

:root {
	@include reduced-motion {
		--speed: 0s;
	}
}

Compile approximativement en :

html.no-js-animation:root {
	--speed: 0s;
}

Composant imbriqué

.card {
	transition: transform var(--speed);

	@include reduced-motion {
		transition: none;
	}

	@include allows-motion {
		&:hover {
			transform: translateY(-4px);
		}
	}
}

Effets lourds uniquement si les animations sont autorisées

Préférer @include allows-motion pour les effets coûteux, afin qu’ils ne s’appliquent jamais en mouvement réduit :

.hero__media {
	@include allows-motion {
		animation: hero-ken-burns 20s linear infinite;
	}
}

Pièces liées

Pièce	Rôle
header.php (script inline)	Bascule initiale js-animation / no-js-animation selon prefers-reduced-motion + hash
04-utilities/_js-animation.scss	Styles d’init des animations scroll/entrée sous .js-animation
src/js/classes/Animation.js	Lance les presets uniquement quand les animations sont activées (sélecteurs sous .js-animation)
Plugin a11y access-config	Peut forcer la classe sur <html> pour l’utilisateur

Conseils d’écriture

• Préférer ces mixins à un @media (prefers-reduced-motion: …) brut dans le SCSS du thème, pour rester cohérent avec le plugin et le hash.
• Garder des valeurs « sûres » hors des mixins ; utiliser @include reduced-motion pour neutraliser le mouvement, et @include allows-motion uniquement pour les enhancements qui ne doivent pas tourner en mouvement réduit.
• Garder les sélecteurs d’animation JS sous .js-animation pour qu’ils ne s’initialisent jamais en no-js-animation.

---

Note

Low Risk
SCSS-only API and token cleanup aligned with existing html class toggles; no auth or data paths, though callers must migrate off --speed and raw media queries.

Overview
Refactors motion-related SCSS so theme styles follow the same html.js-animation / html.no-js-animation flags as header.php and the a11y plugin, instead of compiling @media (prefers-reduced-motion).

The reduced-motion mixin no longer takes a $reduce argument or emits media queries; a shared _html-animation-class helper emits html.#{$class} at :root/html and html.#{$class} & when nested. A new allows-motion mixin targets html.js-animation for motion-only enhancements.

Removes the global --speed token and the :root rule that set --speed: 0s under reduced motion, so animation timing is no longer centralized via that variable in _variables-css.scss.

^{Reviewed by Cursor Bugbot for commit 459d1ac. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 638da7d. Configure here.}