fix(elements): respect reduced motion preferences (#3980)

Author: hugo-vrijswijk

packages/elements/playwright.config.ts

@@ -31,9 +31,22 @@ export default defineConfig({
   },
   /* Configure projects for major browsers */
   projects: [
-    { name: 'chromium', use: { ...devices['Desktop Chrome'], viewport: { width: 1400, height: 1000 } } },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: { width: 1400, height: 1000 },
+        contextOptions: { reducedMotion: 'reduce' },
+      },
+    },
 
-    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        contextOptions: { reducedMotion: 'reduce' },
+      },
+    },
 
     // {
     //   name: 'webkit',

packages/elements/src/components/result-status-bar/result-status-bar.ts

@@ -83,7 +83,7 @@ export class ResultStatusBar extends BaseElement {
           style="width: ${this.#calculatePercentage(metric.amount)}%"
           class="${this.#colorFromMetric(metric.type)} ${metric.amount === 0
             ? 'opacity-0'
-            : 'opacity-100'} relative flex items-center overflow-hidden transition-width"
+            : 'opacity-100'} relative flex items-center overflow-hidden motion-safe:transition-width"
           >${shouldBeSmall ? nothing : html`<span class="ms-3 font-bold text-gray-800">${metric.amount}</span>`}
         </div>`,
     );

packages/elements/src/lib/html-helpers.ts

@@ -121,7 +121,10 @@ export function describeLocation({ fileName, location }: { fileName: string; loc
 
 export function scrollToCodeFragmentIfNeeded(el: Element | null) {
   if (el && !isElementInViewport(el)) {
-    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    el.scrollIntoView({
+      block: 'center',
+      behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth',
+    });
   }
 }