Skip to content

Add a reduced-motion guard and accessible labelling to the landing StarField background #655

Description

@1nonlypiece

📌 Description

src/components/landing-page/ui/StarField.tsx renders a large decorative
star background. It should not animate for users who prefer reduced motion, must
be hidden from assistive tech as decorative, and should not regress landing-page
performance.

This issue adds a prefers-reduced-motion guard, marks the field as decorative
(aria-hidden), and ensures it does not block interaction or hurt rendering cost.

🎯 Requirements and Context

  • Respect prefers-reduced-motion: reduce (disable/limit animation).
  • Mark the decorative layer aria-hidden and ensure pointer-events: none.
  • Keep render cost bounded (no per-frame layout thrash; CSS over JS where possible).
  • No visual regression for default-motion users.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b perf/starfield-reduced-motion

2. Implement changes

  • Update src/components/landing-page/ui/StarField.tsx with the motion guard and
    ARIA/pointer fixes.
  • Add src/components/landing-page/__tests__/StarField.test.tsx covering
    reduced-motion behaviour, aria-hidden, and pointer-events (mock matchMedia).
  • Add docs/performance/STARFIELD.md documenting the motion and cost decisions.
  • Validate it does not intercept clicks or announce to screen readers.

3. Test and commit

  • Run pnpm test.
  • Cover edge cases: reduced-motion on/off, SSR (no window), large viewport.

Example commit message

perf: reduced-motion guard and a11y for landing StarField

✅ Guidelines

  • Minimum 95% test coverage on new/changed lines.
  • Clear, reviewer-friendly documentation.
  • Timeframe: 96 hours.

🏷️ Labels

type-performance · type-security · area-frontend · MAYBE REWARDED ·
GRANTFOX OSS · OFFICIAL CAMPAIGN

💬 Community & Support

  • Join the CommitLabs contributor Discord to coordinate and get unblocked fast:
    https://discord.gg/WV7tdYkJk
  • Introduce yourself before starting so we can avoid duplicate work and pair you
    with a reviewer. Maintainers triage actively and review fast.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No fields configured for Task.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions