From 50e3644aab7e4190f7171cb5038d816cf5e44b0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zoe=CC=88=20Bijl?= Date: Thu, 16 Oct 2025 12:46:47 +0200 Subject: [PATCH] [feature] create and load accessibility.js this can be generalised further i think but for now it does what i need it to do. --- app/javascript/flavours/glitch/main.jsx | 2 ++ .../flavours/glitch/utils/accessibility.js | 26 +++++++++++++++++++ public/index.html | 2 +- 3 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 app/javascript/flavours/glitch/utils/accessibility.js diff --git a/app/javascript/flavours/glitch/main.jsx b/app/javascript/flavours/glitch/main.jsx index f30e6fb4d..58e31a101 100644 --- a/app/javascript/flavours/glitch/main.jsx +++ b/app/javascript/flavours/glitch/main.jsx @@ -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"); diff --git a/app/javascript/flavours/glitch/utils/accessibility.js b/app/javascript/flavours/glitch/utils/accessibility.js new file mode 100644 index 000000000..38a38ecea --- /dev/null +++ b/app/javascript/flavours/glitch/utils/accessibility.js @@ -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)); +} diff --git a/public/index.html b/public/index.html index d935cf7c8..0bf3f91a9 100644 --- a/public/index.html +++ b/public/index.html @@ -26,7 +26,7 @@ - +