From 05b74365fa38883e36f58a86a205a6ac6404f3df Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Tue, 3 Dec 2024 00:59:13 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20broken=20animati?= =?UTF-8?q?on=20when=20motion=20is=20reduced?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Feedback from one of our users. I forgot animation can be disabled for accessibility purpose. Fix it by bypassing the animation if reduce motion is activated. Oopsie, mybad, I learnt something. --- src/frontend/src/features/home/routes/Home.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/features/home/routes/Home.tsx b/src/frontend/src/features/home/routes/Home.tsx index 813aea68..e6ebc812 100644 --- a/src/frontend/src/features/home/routes/Home.tsx +++ b/src/frontend/src/features/home/routes/Home.tsx @@ -32,8 +32,13 @@ const Columns = ({ children }: { children?: ReactNode }) => { justifyContent: 'normal', padding: '0 1rem', width: 'calc(100% - 2rem)', - opacity: 0, - animation: '.5s ease-in fade 0s forwards', + '@media(prefers-reduced-motion: reduce)': { + opacity: 1, + }, + '@media(prefers-reduced-motion: no-preference)': { + opacity: 0, + animation: '.5s ease-in fade 0s forwards', + }, lg: { flexDirection: 'row', justifyContent: 'center',