test(animations): add accessibility tests (#4633)

[soumyasekharshee265-ux]

Description

Fixes #4633

This PR adds a new test file lib/svg/animations.accessibility.test.ts that verifies Accessibility Standards & Screen Reader ARIA Compliance for the tower animation CSS generator (lib/svg/animations.ts).

Since getTowerAnimationCSS() produces CSS strings (not DOM elements), the accessibility tests focus on the applicable WCAG concerns for animated CSS output:

• ✅ WCAG 2.3.3 (Animation from Interactions) — All animated entrances (rise, fade, slide) include @media (prefers-reduced-motion: reduce) support
• ✅ Cascade safety — Reduced-motion overrides use !important so user accessibility preferences cannot be bypassed by other styles
• ✅ WCAG 2.2.2 (Pause, Stop, Hide) — The entrance: 'none' mode produces a fully static render path with zero @keyframes or animation properties
• ✅ WCAG 1.3.1 (Info & Relationships) — Final visible state never uses display: none or visibility: hidden, so screen readers always see complete content
• ✅ WCAG 4.1.1 (Parsing) — Every supported entrance type returns valid, non-empty CSS containing the .cp-tower selector

Test results: 5/5 tests pass in npx vitest run lib/svg/animations.accessibility.test.ts (5ms duration).

Note: 2 pre-existing test failures (proxy.accessibility.test.ts and components/dashboard/HistoricalTrendView.empty-fallback.test.tsx) exist on main and are unrelated to this PR. Verified by running tests on a clean main checkout before this branch was created.

Pillar

• 🎨 Pillar 1 — New Theme Design
• 📐 Pillar 2 — Geometric SVG Improvement
• 🕐 Pillar 3 — Timezone Logic Optimization
• 🛠️ Other (Bug fix, refactoring, docs) — Testing / Accessibility coverage

Visual Preview

No visual changes — this PR only adds a new test file. No source code, themes, or SVG output is modified.

Test run output:

✓ lib/svg/animations.accessibility.test.ts (5 tests) 5ms
  ✓ Tower Animation Accessibility (5)
    ✓ provides prefers-reduced-motion support for all animated entrances
    ✓ enforces reduced-motion overrides with !important to prevent cascade bypass
    ✓ exposes a non-animated render path for users who disable motion entirely
    ✓ maintains visible final state so screen readers and assistive tech see complete content
    ✓ returns valid non-empty CSS for every supported entrance type to guarantee accessible markup

Test Files  1 passed (1)
Tests       5 passed (5)

Checklist before requesting a review:

• I have read the CONTRIBUTING.md file.
• I have tested these changes locally (npx vitest run lib/svg/animations.accessibility.test.ts — all 5 tests pass).
• I have run npm run format and npm run lint locally and resolved all errors (CI will fail otherwise).
• My commits follow the Conventional Commits format (e.g., feat(themes): ..., fix(calculate): ...).
• I have updated README.md if I added a new theme or URL parameter. (N/A — no new theme or URL parameter added)
• I have starred the repo.
• I have made sure that i have only one commit to merge in this PR.
• The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). (N/A — no SVG output changes)
• (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.

[github-actions]

🚨 Hey @soumyasekharshee265-ux, the CI Pipeline is failing on this PR and it has been marked as status:blocked.

Please fix the issues before this can be reviewed. Here's how:

1. Run checks locally before pushing:

npm run format:check   # Check Prettier formatting
npm run lint           # Run ESLint
npm run typecheck      # TypeScript type check
npm run test           # Run unit tests (Vitest)
npm run build          # Verify production build passes

2. Auto-fix common issues:

npm run format         # Auto-fix formatting with Prettier
npm run lint -- --fix  # Auto-fix lint errors where possible

3. Check the full failure log here:
👉 View CI Run

Once you push a fix and the CI passes, the status:blocked label will be removed automatically. 💪

[soumyasekharshee265-ux]

Hi @JhaSourav07 👋

The failing CI check is caused by pre-existing test failures unrelated to this PR:

• app/components/CopyRepoButton.massive-scaling.test.tsx → TestingLibraryElementError: Unable to find an element with the text "Copy failed"
• proxy.accessibility.test.ts → Failed to resolve import "./proxy"
• components/dashboard/HistoricalTrendView.empty-fallback.test.tsx → outdated text matcher

I verified this by:

1. Stashing my changes
2. Checking out main directly
3. Running the same tests — they fail on clean main as well

My contribution is clean and verified:

• ✅ npx vitest run lib/svg/animations.accessibility.test.ts → 5/5 tests pass (5ms)
• ✅ npm run format → no errors
• ✅ npm run lint → 0 errors (only pre-existing warnings)
• ✅ CI: Prettier Formatting ✓, ESLint ✓, TypeScript Type Check ✓, Production Build ✓

Only the Vitest step fails — and it fails on pre-existing component tests, not on the file I added.

Could you please review when you get a chance? Happy to make any changes you'd like 🙏

Thanks!