[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
parent 39720bf7d2
commit 50e3644aab
3 changed files with 29 additions and 1 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");
@@ -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>