From bc69d48652e431b06a1fff2c3fd0a67b54d23f81 Mon Sep 17 00:00:00 2001 From: Cytrogen Date: Wed, 25 Mar 2026 21:22:19 -0400 Subject: [PATCH] Cherry-pick PR #104: Reduced motion accessibility Adds prefers-reduced-motion support via JS body class detection and CSS animation gating. Will be rewritten to pure CSS approach. From: Moiety (https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/104) --- 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 f30e6fb4d33e5525293f71252863641d67e564b8..58e31a101346ccb5a32678bf98b952616490a9aa 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 0000000000000000000000000000000000000000..38a38ecea7d99aec6eb2b58e74737f626d985e4a --- /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 d935cf7c847912013ceefe3d15449010577c8c79..0bf3f91a96e89c572812fd1e0f34ed8c3d7629ca 100644 --- a/public/index.html +++ b/public/index.html @@ -26,7 +26,7 @@ - +