From c925bff3a22f7729d88f906ac953e5e38e8331b0 Mon Sep 17 00:00:00 2001 From: Shan Usmani Date: Thu, 23 Jul 2026 03:38:39 +0530 Subject: [PATCH 1/3] fix(a11y): respect prefers-reduced-motion in BackToTopButton --- src/components/BackToTopButton.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/BackToTopButton.tsx b/src/components/BackToTopButton.tsx index fb48452e2..9cef27285 100644 --- a/src/components/BackToTopButton.tsx +++ b/src/components/BackToTopButton.tsx @@ -17,11 +17,21 @@ export default function BackToTopButton() { } }; + const [prefersReducedMotion, setPrefersReducedMotion] = useState(false); + + useEffect(() => { + const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); + setPrefersReducedMotion(mq.matches); + const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches); + mq.addEventListener("change", handler); + return () => mq.removeEventListener("change", handler); + }, []); + const scrollToTop = () => { if (typeof window !== "undefined") { window.scrollTo({ top: 0, - behavior: "smooth", + behavior: prefersReducedMotion ? "auto" : "smooth", }); } }; @@ -70,7 +80,7 @@ export default function BackToTopButton() { strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} style={{ filter: "drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent))" }} - className="transition-[stroke-dashoffset] duration-100" + className={`transition-[stroke-dashoffset] duration-100 ${prefersReducedMotion ? "!transition-none" : ""}`} />