From e77c2c2cd3970331231793e5b7530fbef3591787 Mon Sep 17 00:00:00 2001 From: sheeeuWu Date: Mon, 8 Jun 2026 00:08:10 +0530 Subject: [PATCH 1/2] test(HeroSection-accessibility): verify Accessibility Standards & Screen Reader Aria Compliance (Variation 4) --- .../HeroSection.accessibility.test.tsx | 62 +++++++++++++++++++ app/components/HeroSection.tsx | 34 ++++++++-- 2 files changed, 90 insertions(+), 6 deletions(-) create mode 100644 app/components/HeroSection.accessibility.test.tsx diff --git a/app/components/HeroSection.accessibility.test.tsx b/app/components/HeroSection.accessibility.test.tsx new file mode 100644 index 000000000..95c315fcf --- /dev/null +++ b/app/components/HeroSection.accessibility.test.tsx @@ -0,0 +1,62 @@ +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom/vitest'; +import { describe, it, expect, vi } from 'vitest'; +import { HeroSection } from './HeroSection'; + +type MockMotionProps = { + children?: React.ReactNode; + className?: string; + [key: string]: unknown; +}; + +vi.mock('framer-motion', () => ({ + motion: { + div: ({ children, ...props }: MockMotionProps) =>
{children}
, + p: ({ children, ...props }: MockMotionProps) =>

{children}

, + }, +})); + +describe('HeroSection — Accessibility & Screen Reader Compliance', () => { + it('renders primary h1 heading with correct text for screen reader hierarchy', () => { + render(); + + const heading = screen.getByRole('heading', { level: 1 }); + expect(heading).toBeInTheDocument(); + expect(heading).toHaveTextContent('Elevate Your Contribution Story.'); + }); + + it('renders search landmark with descriptive aria-label for the input form', () => { + render(); + + const searchRegion = screen.getByRole('search', { + name: 'Generate your GitHub streak badge', + }); + expect(searchRegion).toBeInTheDocument(); + }); + + it('renders username input with aria-label for screen reader announcement', () => { + render(); + + const input = screen.getByRole('textbox', { name: 'GitHub username' }); + expect(input).toBeInTheDocument(); + }); + + it('renders both buttons with descriptive aria-labels', () => { + render(); + + expect( + screen.getByRole('button', { name: 'Copy badge link to clipboard' }) + ).toBeInTheDocument(); + + expect( + screen.getByRole('button', { name: 'Watch your GitHub contribution dashboard' }) + ).toBeInTheDocument(); + }); + + it('hides decorative background elements from screen readers via aria-hidden', () => { + const { container } = render(); + + const hiddenElements = container.querySelectorAll('[aria-hidden="true"]'); + expect(hiddenElements.length).toBeGreaterThanOrEqual(2); + }); +}); diff --git a/app/components/HeroSection.tsx b/app/components/HeroSection.tsx index e735a2982..17b921f70 100644 --- a/app/components/HeroSection.tsx +++ b/app/components/HeroSection.tsx @@ -5,12 +5,25 @@ import { Copy } from 'lucide-react'; export function HeroSection() { return ( -
-
+
+