[bugfix] only play animations when prefers-reduced-motion: no-preference

[feature] create and load accessibility.js
this can be generalised further i think but for now it does what i need it to do.
2025-10-16 12:47:43 +02:00 · 2025-10-16 12:46:47 +02:00
4 changed files with 32 additions and 4 deletions
@@ -5,6 +5,7 @@ import Mastodon from "flavours/glitch/containers/mastodon";
 import { me } from "flavours/glitch/initial_state";
 import * as perf from "flavours/glitch/performance";
 import ready from "flavours/glitch/ready";
+import { setReducedMotionBodyClass } from "flavours/glitch/utils/accessibility";
 import { store } from "flavours/glitch/store";

 /**
@@ -12,6 +13,7 @@ import { store } from "flavours/glitch/store";
 */
 function main() {
  perf.start("main()");
+  setReducedMotionBodyClass();

  return ready(async () => {
    const mountNode = document.getElementById("mastodon");
@@ -1,12 +1,12 @@
 /* 🚥 Status Bar */
-.status-favourite.active svg {
+.no-reduce-motion .status-favourite.active svg {
    animation: bounce 0.4s ease-out;
 }

-.status-boost.active svg {
+.no-reduce-motion .status-boost.active svg {
    animation: launch 1.2s ease-in 1;
 }

-.status-bookmark.active svg {
+.no-reduce-motion .status-bookmark.active svg {
    animation: bounce-vertical 0.4s ease-out;
 }
@@ -0,0 +1,26 @@
+import ready from "../ready";
+
+ready(() => {
+  setReducedMotionBodyClass();
+});
+
+export function setMediaQueryBodyClass(query, className) {
+  if (query.matches) {
+    document.body.classList.add(className.true);
+    document.body.classList.remove(className.false);
+  } else {
+    document.body.classList.add(className.false);
+    document.body.classList.remove(className.true);
+  }
+}
+
+export function setReducedMotionBodyClass() {
+  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const className = {
+    true: "reduce-motion",
+    false: "no-reduce-motion",
+  };
+
+  setMediaQueryBodyClass(prefersReducedMotion, className);
+  prefersReducedMotion.addEventListener("change", () => setReducedMotionBodyClass(prefersReducedMotion));
+}
@@ -26,7 +26,7 @@

    <script src="/packs/js/flavours/glitch/home.js"></script>
 </head>
-<body class='app-body no-reduce-motion system-font'>
+<body class='app-body system-font'>
 <div class='app-holder' data-props='{&quot;locale&quot;:&quot;en&quot;}' id='mastodon'>
 </div>
 </body>
Author	SHA1	Message	Date
Zoë Bijl	80e160297b	[bugfix] only play animations when `prefers-reduced-motion: no-preference`	2025-10-16 12:47:43 +02:00
Zoë Bijl	50e3644aab	[feature] create and load accessibility.js this can be generalised further i think but for now it does what i need it to do.	2025-10-16 12:46:47 +02:00