test(accessibility): verify Heatmap screen reader support#3661
test(accessibility): verify Heatmap screen reader support#3661saagnik23 wants to merge 2 commits into
Conversation
|
@saagnik23 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds an accessibility-focused test suite for the Heatmap dashboard component to validate semantic structure and keyboard/ARIA behavior.
Changes:
- Introduces Vitest + Testing Library tests covering headings, grid/row/gridcell semantics, and focus/tooltip interactions
- Adds test helpers/mocks (e.g.,
ResizeObserver,framer-motion) to support JSDOM execution - Verifies empty-state fallback behavior when contribution data is absent/zeroed
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| beforeAll(() => { | ||
| global.ResizeObserver = class ResizeObserver { | ||
| observe() {} | ||
| unobserve() {} | ||
| disconnect() {} | ||
| }; | ||
| }); |
| /* eslint-disable @typescript-eslint/no-unused-vars */ | ||
| vi.mock('framer-motion', () => ({ | ||
| motion: { | ||
| div: ({ | ||
| children, | ||
| initial, | ||
| whileInView, | ||
| viewport, | ||
| transition, | ||
| animate, | ||
| exit, | ||
| ...props | ||
| }: Record<string, unknown>) => <div {...props}>{children}</div>, | ||
| }, | ||
| AnimatePresence: ({ children }: { children?: ReactNode }) => <>{children}</>, | ||
| })); | ||
| /* eslint-enable @typescript-eslint/no-unused-vars */ |
| cells.forEach((cell) => { | ||
| expect(cell).toHaveAttribute('tabIndex', '0'); | ||
| }); |
| expect(cells[0]).toHaveAttribute('aria-label', '0 contributions on Jan 1, 2024'); | ||
|
|
||
| // Day 2: 1 contribution | ||
| expect(cells[1]).toHaveAttribute('aria-label', '1 contribution on Jan 2, 2024'); | ||
|
|
||
| // Day 3: 5 contributions | ||
| expect(cells[2]).toHaveAttribute('aria-label', '5 contributions on Jan 3, 2024'); |
| // Tooltip should appear | ||
| const tooltip = screen.getByRole('tooltip'); | ||
| expect(tooltip).toBeInTheDocument(); | ||
| expect(tooltip).toHaveTextContent('3 contributions on Jan 1, 2024'); |
github-actions
Bot
added
the
status:blocked
|
🚨 Hey @saagnik23, the CI Pipeline is failing on this PR and it has been marked as 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 passes2. Auto-fix common issues: npm run format # Auto-fix formatting with Prettier
npm run lint -- --fix # Auto-fix lint errors where possible3. Check the full failure log here: Once you push a fix and the CI passes, the |
Aamod007
left a comment
Aamod007
left a comment
There was a problem hiding this comment.
LGTM on the code side! The accessibility tests are very well done. Note that CI seems to be failing, please resolve that if needed.
Aamod007
added
level:intermediate
Aamod007
left a comment
Aamod007
left a comment
There was a problem hiding this comment.
Re-review: Code looks good, but CI is failing. Please fix the CI issues so this can be merged.
Description
Fixes #2556
Adds comprehensive accessibility and screen reader ARIA compliance tests for the dashboard
Heatmapcomponent.Pillar
Visual Preview
N/A (Testing only)
Checklist before requesting a review:
CONTRIBUTING.mdfile.localhost:3000/api/streak?user=YOUR_USERNAME).npm run formatandnpm run lintlocally and resolved all errors (CI will fail otherwise).test(accessibility): ...).README.mdif I added a new theme or URL parameter.