Skip to content

Commit 3880d1e

Browse files
authored
test(Icons-accessibility verify Accessibility Standards & Screen Reader Aria Compliance (Variation 4) (JhaSourav07#3115)
## Description This PR introduces comprehensive accessibility tests for the `Icons` components. It verifies that all standard `lucide-react` SVG icons are correctly marked as decorative with `aria-hidden="true"` to ensure screen reader compliance and maintain robust accessibility standards. Fixes JhaSourav07#2816 ## Pillar - [ ] 🎨 Pillar 1 — New Theme Design - [ ] 📐 Pillar 2 — Geometric SVG Improvement - [ ] 🕐 Pillar 3 — Timezone Logic Optimization - [x] 🛠️ Other (Bug fix, refactoring, docs) ## Visual Preview N/A (Test addition only, no visual changes). ## Checklist before requesting a review: - [x] I have read the `CONTRIBUTING.md` file. - [x] I have tested these changes locally (`localhost:3000/api/streak?user=YOUR_USERNAME`). - [x] I have run `npm run format` and `npm run lint` locally and resolved all errors (CI will fail otherwise). - [x] 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. - [x] I have started the repo. - [x] I have made sure that i have only one commit to merge in this PR. - [x] The SVG output matches the CommitPulse "premium quality" aesthetic standard (no raw elements, smooth animations, correct fonts). - [x] (Recommended) I joined the CommitPulse Discord community for contributor discussions, mentorship, and faster PR support.
2 parents 3dca047 + 5dc44f8 commit 3880d1e

1 file changed

Lines changed: 44 additions & 0 deletions

File tree

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { render } from '@testing-library/react';
2+
import { describe, expect, it } from 'vitest';
3+
4+
import { BoxIcon, CheckIcon, CloseIcon, CopyIcon, ZapIcon } from './Icons';
5+
6+
describe('Icons accessibility behavior', () => {
7+
it('renders CopyIcon as decorative with aria-hidden="true"', () => {
8+
const { container } = render(<CopyIcon />);
9+
const svg = container.querySelector('svg');
10+
expect(svg?.getAttribute('aria-hidden')).toBe('true');
11+
});
12+
13+
it('renders ZapIcon as decorative with aria-hidden="true"', () => {
14+
const { container } = render(<ZapIcon />);
15+
const svg = container.querySelector('svg');
16+
expect(svg?.getAttribute('aria-hidden')).toBe('true');
17+
});
18+
19+
it('renders BoxIcon as decorative with aria-hidden="true"', () => {
20+
const { container } = render(<BoxIcon />);
21+
const svg = container.querySelector('svg');
22+
expect(svg?.getAttribute('aria-hidden')).toBe('true');
23+
});
24+
25+
it('renders CheckIcon as decorative with aria-hidden="true"', () => {
26+
const { container } = render(<CheckIcon />);
27+
const svg = container.querySelector('svg');
28+
expect(svg?.getAttribute('aria-hidden')).toBe('true');
29+
});
30+
31+
it('renders CloseIcon as decorative with aria-hidden="true"', () => {
32+
const { container } = render(<CloseIcon />);
33+
const svg = container.querySelector('svg');
34+
expect(svg?.getAttribute('aria-hidden')).toBe('true');
35+
});
36+
37+
it('includes basic structural roles on SVG elements', () => {
38+
const { container } = render(<CopyIcon />);
39+
const svg = container.querySelector('svg');
40+
// Lucide components use standard svg elements which imply a graphics role,
41+
// and setting aria-hidden="true" makes it decorative.
42+
expect(svg?.tagName.toLowerCase()).toBe('svg');
43+
});
44+
});

0 commit comments

Comments
 (0)