From 7d0580539d5371e81548428da76f9106566a6d1b Mon Sep 17 00:00:00 2001 From: Ben Hammond Date: Mon, 4 Nov 2024 12:28:56 -0700 Subject: [PATCH] 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 --- .github/dependabot.yml | 17 ++--- .github/workflows/runFrontendTests.yml | 2 +- biome.json | 3 + .../internal_routes.ci.spec.ts | 4 +- frontend/src/charts/trendsChart/Axes.tsx | 18 +++-- frontend/src/index.css | 76 ++++++++++++------- .../GunViolencePolicyHomeLink.tsx | 6 +- 7 files changed, 75 insertions(+), 51 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 026e16b21e..531a6d27e8 100644 --- 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 index a2c2188ffa..fb1fdaec16 100644 --- 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 index e1160380ef..50c4f3b933 100644 --- 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 index a584e5ea3a..48c10b1667 100644 --- 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 index 28ccad67b3..c4a6bfee68 100644 --- 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,7 +207,9 @@ export function Axes({ {/* Top Y-Axis Label */} - {Y_AXIS_CONFIG[type]?.topLabel} + + {Y_AXIS_CONFIG[type]?.topLabel} + {/* Bottom Y-Axis Label */} - {Y_AXIS_CONFIG[type]?.bottomLabel} + + {Y_AXIS_CONFIG[type]?.bottomLabel} + diff --git a/frontend/src/index.css b/frontend/src/index.css index 896cc3d740..41715e87a0 100644 --- 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; } } \ No newline at end of file diff --git a/frontend/src/pages/Policy/policySections/GunViolencePolicyHomeLink.tsx b/frontend/src/pages/Policy/policySections/GunViolencePolicyHomeLink.tsx index ca74eb774d..b5cc143944 100644 --- 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.

-

- Founding Director & Senior Advisor -

+

+ Founding Director & Senior Advisor +