feat(a11y): respect reduced-motion preferences (#2805)

* feat(a11y): respect reduced-motion preferences

* Update

* fix style lint errors

* fix style lint errors

---------

Co-authored-by: Paul Jankowski <8bittitan@gmail.com>

examples/demo-react/src/App.css

@@ -208,6 +208,12 @@ main {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .search-wrapper .DocSearch-Button {
+    transition-duration: 0s;
+  }
+}
+
 .search-wrapper .DocSearch-Button:hover,
 .search-wrapper .DocSearch-Button:focus-visible {
   border-color: var(--demo-docsearch-button-hover-border) !important;
@@ -232,6 +238,20 @@ main {
   animation-delay: 0.2s;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .demo-section {
+    animation-duration: 0s;
+  }
+
+  .demo-section:nth-child(2) {
+    animation-delay: 0;
+  }
+
+  .demo-section:nth-child(3) {
+    animation-delay: 0;
+  }
+}
+
 @keyframes fadeInUp {
   from {
     opacity: 0;

packages/docsearch-css/src/button.css

@@ -68,6 +68,12 @@
   border-radius: 4px;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .DocSearch-Button-Key {
+    transition-duration: 0s;
+  }
+}
+
 .DocSearch-Button-Key--ctrl {
   width: 33px;
 }
@@ -76,12 +82,6 @@
   margin-inline-end: 0.4em;
 }
 
-@media (prefers-reduced-motion) {
-  .DocSearch-Button-Key {
-    transition: none;
-  }
-}
-
 .DocSearch-Button-Key--pressed {
   transform: translateY(1px);
   box-shadow: var(--docsearch-key-pressed-shadow) !important;

packages/docsearch-css/src/modal.css

@@ -243,7 +243,7 @@
 
   @media (prefers-reduced-motion: reduce) {
     svg {
-      transition: none;
+      transition-duration: 0s;
     }
   }
 }
@@ -530,7 +530,7 @@
   justify-content: center;
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
   .DocSearch-Action {
     animation: none;
   }
@@ -546,6 +546,13 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .DocSearch-Action,
+  .DocSearch-AskAi-Return {
+    animation-duration: 0s;
+  }
+}
+
 .DocSearch-Close[hidden],
 .DocSearch-Input[hidden] {
   display: none;
@@ -842,11 +849,10 @@
   display: block;
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
   .DocSearch-Hit-action-button:hover,
   .DocSearch-Hit-action-button:focus {
-    background: rgb(0 0 0 / 20%);
-    transition: none;
+    transition-duration: 0s;
   }
 }
 
@@ -917,14 +923,6 @@
   color: var(--docsearch-highlight-color);
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
-  .DocSearch-Hit-action-button:hover,
-  .DocSearch-Hit-action-button:focus {
-    background: rgb(0 0 0 / 20%);
-    transition: none;
-  }
-}
-
 .DocSearch-Hit-badge {
   font-size: 0.75rem;
   margin-right: 1em;

packages/docsearch-css/src/sidepanel.css

@@ -195,7 +195,7 @@
   }
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
   .DocSearch-Sidepanel-Container {
     transition: none;
   }
@@ -472,7 +472,7 @@
   transition: all 150ms ease-in-out;
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
   .DocSearch-Sidepanel-Prompt--stop,
   .DocSearch-Sidepanel-Prompt--submit {
     transition: none;

packages/website/src/components/ui/button.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const BASE =
-  'relative inline-flex h-10 cursor-pointer items-center justify-center gap-1.5 rounded-lg border px-4 text-sm font-medium no-underline! transition-all duration-150 active:scale-[0.97]';
+  'relative inline-flex h-10 cursor-pointer items-center justify-center gap-1.5 rounded-lg border px-4 text-sm font-medium no-underline! transition-all duration-150 motion-reduce:duration-0 active:scale-[0.97]';
 
 // Outline / secondary
 export const Button = ({ children, href, className = '', ...props }) => {

packages/website/src/css/custom.css

@@ -442,6 +442,12 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   transition: all 0.2s ease-in-out;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .theme-announcement-bar a {
+    transition-duration: 0s;
+  }
+}
+
 .theme-announcement-bar a:hover,
 .theme-announcement-bar a:focus-visible {
   background-color: var(--ifm-color-primary);
@@ -712,6 +718,12 @@ html[data-theme='dark'] .docsearch-logo {
   transition: translate 0.12s ease-out;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .key__content {
+    transition-duration: 0s;
+  }
+}
+
 .key__text {
   font-family: system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -824,6 +836,12 @@ html[data-theme='dark'] .shimmer-effect {
   animation: shimmer 2s infinite linear;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-effect {
+    animation-duration: 0s;
+  }
+}
+
 @keyframes shimmer {
   0% {
     background-position: 200% 0;