Frontend: Y axis cursor (#3742)

- rotates cursor on vertical y-axis label text - sets dependabot to monthly, hopefully trigger fewers builds and save us netlify $ - have biome ignore index.css since custom tailwind configs are causing issues with it - have playwright use "prefers reduced motion" - adjust animation to respect prefers reduced motion - playwright a11y error fixed by avoiding the contrast error which was being triggered by text fading in
SatcherInstitute · Nov 4, 2024 · 7d05805 · 7d05805
1 parent 221555f
commit 7d05805
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 51 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -1,22 +1,19 @@
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
 version: 2
 updates:
   - package-ecosystem: "npm"
     directory: "frontend/"
     schedule:
-      interval: "weekly"
+      interval: "monthly"
     groups:
       minor-frontend:
         update-types:
           - "minor"
           - "patch"
-    open-pull-requests-limit: 3
+    open-pull-requests-limit: 1
   - package-ecosystem: "npm"
     directory: "frontend_server/"
     schedule:
-      interval: "weekly"
+      interval: "monthly"
     groups:
       minor-frontend-server:
         update-types:
@@ -26,20 +23,20 @@ updates:
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
-      interval: "weekly"
+      interval: "monthly"
     groups:
       minor-gh-actions:
         update-types:
           - "minor"
           - "patch"
-    open-pull-requests-limit: 3
+    open-pull-requests-limit: 1
   - package-ecosystem: "pip"
     directory: "shared_requirements/"
     schedule:
-      interval: "weekly"
+      interval: "monthly"
     groups:
       minor-python:
         update-types:
           - "minor"
           - "patch"
-    open-pull-requests-limit: 3
+    open-pull-requests-limit: 1
diff --git a/.github/workflows/runFrontendTests.yml b/.github/workflows/runFrontendTests.yml
@@ -87,7 +87,7 @@ jobs:
       - name: Install playwright deps
         run: npx playwright install --with-deps chromium
       - name: run quicker E2E on DEPLOY_PREVIEW
-        run: npx playwright test --project=E2E_CI --workers 4
+        run: npx playwright test --project=E2E_NIGHTLY --workers 4
         # base url based on the GITHUB_PR_NUMBER +  NETLIFY_SITE_NAME
         env:
           E2E_BASE_URL: 'https://deploy-preview-${{env.GITHUB_PR_NUMBER}}--${{env.NETLIFY_SITE_NAME}}.netlify.app'

diff --git a/biome.json b/biome.json
@@ -1,5 +1,8 @@
 {
 	"$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+	"files": {
+		"ignore": ["**/*.css"]
+	},
 	"organizeImports": {
 		"enabled": false
 	},

diff --git a/frontend/playwright-tests/internal_routes.ci.spec.ts b/frontend/playwright-tests/internal_routes.ci.spec.ts
@@ -1,5 +1,5 @@
-import { test, expect } from '@playwright/test'
 import AxeBuilder from '@axe-core/playwright'
+import { expect, test } from '@playwright/test'
 
 test.describe.configure({ mode: 'parallel' })
 
@@ -16,6 +16,8 @@ test('Policy Hub Loads', async ({ page }) => {
   await expect(page.getByLabel('Policy Context Introduction')).toContainText(
     'Understanding the Crisis of Gun Violence in Atlanta',
   )
+  // mimic reduced motion to prevent animation, which was causing contrast a11y error
+  await page.emulateMedia({ reducedMotion: 'reduce' })
   const accessibilityScanResults = await new AxeBuilder({ page })
     .exclude('.text-tinyTag')
     .exclude('.shadow-raised-tighter')

diff --git a/frontend/src/charts/trendsChart/Axes.tsx b/frontend/src/charts/trendsChart/Axes.tsx
@@ -14,20 +14,20 @@
  **/
 
 /* External Imports */
-import { useRef, useEffect } from 'react'
-import { axisLeft, axisBottom, select } from 'd3'
+import { axisBottom, axisLeft, select } from 'd3'
+import { useEffect, useRef } from 'react'
 
 /* Local Imports */
 
 /* Constants */
-import { CONFIG, TYPES, FORMATTERS as F } from './constants'
-import type { TrendsData, XScale, YScale, AxisConfig } from './types'
+import { CONFIG, FORMATTERS as F, TYPES } from './constants'
+import type { AxisConfig, TrendsData, XScale, YScale } from './types'
 
 /* Helpers */
-import { getMinNumber, getMaxNumber, getDates } from './helpers'
 import { getPrettyDate } from '../../data/utils/DatasetTimeUtils'
 import { het } from '../../styles/DesignTokens'
 import { X_AXIS_MAX_TICKS_SKINNY } from '../utils'
+import { getDates, getMaxNumber, getMinNumber } from './helpers'
 
 /* Define type interface */
 export interface AxesProps {
@@ -207,15 +207,19 @@ export function Axes({
         </g>
         {/* Top Y-Axis Label */}
         <g transform={`translate(${yAxisLabelPadding}, 0)rotate(-90)`}>
-          <text textAnchor='end'>{Y_AXIS_CONFIG[type]?.topLabel}</text>
+          <text className='cursor-vertical-text' textAnchor='end'>
+            {Y_AXIS_CONFIG[type]?.topLabel}
+          </text>
         </g>
         {/* Bottom Y-Axis Label */}
         <g
           transform={`translate(${yAxisLabelPadding}, ${
             HEIGHT - marginBottom
           })rotate(-90)`}
         >
-          <text textAnchor='start'>{Y_AXIS_CONFIG[type]?.bottomLabel}</text>
+          <text className='cursor-vertical-text' textAnchor='start'>
+            {Y_AXIS_CONFIG[type]?.bottomLabel}
+          </text>
         </g>
       </g>
     </g>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -80,7 +80,7 @@ button[data-action='back']:focus {
     text-align: center !important;
     font-size: 0.75rem !important;
     font-weight: 200 !important;
-    font-decoration: none !important;
+    text-decoration: none !important;
     max-width: 600px;
   }
 
@@ -231,38 +231,56 @@ button[data-action='back']:focus {
   }
 }
 
-/* ResourceItemCard Animations */
-@keyframes fadeInUpBlur {
-  0% {
-    visibility: hidden;
-    opacity: 0;
-    filter: blur(10px);
-    transform: translateY(20%);
-    will-change: opacity, filter, transform;
-  }
-  1% {
-    visibility: visible;
+/* Base styles without animation */
+.fade-in-up-blur {
+  visibility: visible; /* Default visible state for reduced motion */
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  /* ResourceItemCard Animations */
+  @keyframes fadeInUpBlur {
+    0% {
+      visibility: hidden;
+      opacity: 0;
+      filter: blur(10px);
+      transform: translateY(20%);
+      will-change: opacity, filter, transform;
+    }
+    1% {
+      visibility: visible;
+    }
+    100% {
+      visibility: visible;
+      opacity: 1;
+      filter: blur(0px);
+      transform: translateY(0%);
+      will-change: auto;
+    }
   }
-  100% {
-    visibility: visible;
-    opacity: 1;
-    filter: blur(0px);
-    transform: translateY(0%);
-    will-change: auto;
+
+  .fade-in-up-blur {
+    visibility: hidden;
+    animation: fadeInUpBlur 0.5s ease-in-out forwards;
   }
-}
 
-.fade-in-up-blur {
-  visibility: hidden;
-  animation: fadeInUpBlur 0.5s ease-in-out forwards;
+  /* Underline Animation */
+  @keyframes underlineSlideIn {
+    from {
+      background-size: 0% 8px;
+    }
+    to {
+      background-size: 100% 8px;
+    }
+  }
 }
 
-/* Underline Animation */
-@keyframes underlineSlideIn {
-  from {
-    background-size: 0% 8px;
-  }
-  to {
-    background-size: 100% 8px;
+/* For users who haven't specified a preference, we can optionally add a fallback */
+@media (prefers-reduced-motion) {
+  .fade-in-up-blur {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+    filter: none;
   }
 }
diff --git a/frontend/src/pages/Policy/policySections/GunViolencePolicyHomeLink.tsx b/frontend/src/pages/Policy/policySections/GunViolencePolicyHomeLink.tsx
@@ -31,9 +31,9 @@ export default function GunViolencePolicyHomeLink() {
               >
                 David Satcher, M.D., Ph.D.
               </p>
-                <p className='text-center text-small mt-0 mb-2 text-sansText'>
-                  Founding Director & Senior Advisor
-                </p>
+              <p className='text-center text-small mt-0 mb-2 text-sansText'>
+                Founding Director & Senior Advisor
+              </p>
 
               <div className='relative text-center'>
                 <span className='absolute xs:top-[-15rem] xs:left-[-2rem] md:top-[-13rem] md:left-[-1rem] lg:top-[-14rem] lg:left-[-5rem] m-0 p-0 text-[20rem] text-hoverAltGreen'>