Skip to content

Commit 66a0f62

Browse files
korel-sankorel-san
authored
feat: add pa11y-ci for automated accessibility testing (#435)
* feat: add pa11y-ci for automated accessibility testing - Install pa11y-ci as dev dependency - Add .pa11yci configuration file with all 33 component pages - Configure to test against WCAG 2.0 AA standard - Add npm scripts for accessibility testing: - test:a11y: run pa11y-ci tests - test:a11y:local: start server and run tests - Document accessibility testing in README This enables automated accessibility testing for all UI components to ensure WCAG compliance.
1 parent 620e09f commit 66a0f62

File tree

5 files changed

+1842
-38
lines changed

5 files changed

+1842
-38
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ testem.log
4141
cypress/downloads/*
4242
cypress/videos/*
4343
cypress/screenshots/*
44+
.pa11y-temp.json
4445

4546
# System files
4647
.DS_Store

‎.pa11yci‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
{
2+
"defaults": {
3+
"standard": "WCAG2AA",
4+
"timeout": 30000,
5+
"wait": 1000,
6+
"runners": ["axe"],
7+
"hideElements": ".cps-loader",
8+
"reporter": "cli",
9+
"level": "error"
10+
},
11+
"urls": [
12+
{
13+
"url": "http://localhost:4200/autocomplete",
14+
"label": "Autocomplete Component"
15+
},
16+
{
17+
"url": "http://localhost:4200/button",
18+
"label": "Button Component"
19+
},
20+
{
21+
"url": "http://localhost:4200/button-toggle",
22+
"label": "Button Toggle Component"
23+
},
24+
{
25+
"url": "http://localhost:4200/checkbox",
26+
"label": "Checkbox Component"
27+
},
28+
{
29+
"url": "http://localhost:4200/chip",
30+
"label": "Chip Component"
31+
},
32+
{
33+
"url": "http://localhost:4200/datepicker",
34+
"label": "Datepicker Component"
35+
},
36+
{
37+
"url": "http://localhost:4200/dialog",
38+
"label": "Dialog Component"
39+
},
40+
{
41+
"url": "http://localhost:4200/divider",
42+
"label": "Divider Component"
43+
},
44+
{
45+
"url": "http://localhost:4200/expansion-panel",
46+
"label": "Expansion Panel Component"
47+
},
48+
{
49+
"url": "http://localhost:4200/file-upload",
50+
"label": "File Upload Component"
51+
},
52+
{
53+
"url": "http://localhost:4200/icon",
54+
"label": "Icon Component"
55+
},
56+
{
57+
"url": "http://localhost:4200/info-circle",
58+
"label": "Info Circle Component"
59+
},
60+
{
61+
"url": "http://localhost:4200/input",
62+
"label": "Input Component"
63+
},
64+
{
65+
"url": "http://localhost:4200/loader",
66+
"label": "Loader Component"
67+
},
68+
{
69+
"url": "http://localhost:4200/menu",
70+
"label": "Menu Component"
71+
},
72+
{
73+
"url": "http://localhost:4200/notification",
74+
"label": "Notifications Component"
75+
},
76+
{
77+
"url": "http://localhost:4200/paginator",
78+
"label": "Paginator Component"
79+
},
80+
{
81+
"url": "http://localhost:4200/progress-circular",
82+
"label": "Progress Circular Component"
83+
},
84+
{
85+
"url": "http://localhost:4200/progress-linear",
86+
"label": "Progress Linear Component"
87+
},
88+
{
89+
"url": "http://localhost:4200/radio-group",
90+
"label": "Radio Component"
91+
},
92+
{
93+
"url": "http://localhost:4200/scheduler",
94+
"label": "Scheduler Component"
95+
},
96+
{
97+
"url": "http://localhost:4200/select",
98+
"label": "Select Component"
99+
},
100+
{
101+
"url": "http://localhost:4200/sidebar-menu",
102+
"label": "Sidebar Menu Component"
103+
},
104+
{
105+
"url": "http://localhost:4200/switch",
106+
"label": "Switch Component"
107+
},
108+
{
109+
"url": "http://localhost:4200/table",
110+
"label": "Table Component"
111+
},
112+
{
113+
"url": "http://localhost:4200/tab-group",
114+
"label": "Tabs Component"
115+
},
116+
{
117+
"url": "http://localhost:4200/tag",
118+
"label": "Tag Component"
119+
},
120+
{
121+
"url": "http://localhost:4200/textarea",
122+
"label": "Textarea Component"
123+
},
124+
{
125+
"url": "http://localhost:4200/timepicker",
126+
"label": "Timepicker Component"
127+
},
128+
{
129+
"url": "http://localhost:4200/tooltip",
130+
"label": "Tooltip Directive"
131+
},
132+
{
133+
"url": "http://localhost:4200/tree-autocomplete",
134+
"label": "Tree Autocomplete Component"
135+
},
136+
{
137+
"url": "http://localhost:4200/tree-select",
138+
"label": "Tree Select Component"
139+
},
140+
{
141+
"url": "http://localhost:4200/tree-table",
142+
"label": "Tree Table Component"
143+
}
144+
]
145+
}

‎README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,38 @@ Execute `npm run generate-json-api` to generate documentation for any changes in
8888
#### Run Cypress e2e tests
8989

9090
`npm run cypress:run` (headless run) or you can open Cypress tests using `npm run cypress:open`
91+
92+
#### Run accessibility tests
93+
94+
The project uses [pa11y-ci](https://github.com/pa11y/pa11y-ci) to test all components for WCAG 2.0 AA compliance.
95+
96+
To run accessibility tests:
97+
98+
1. Start the development server:
99+
```bash
100+
npm run start
101+
```
102+
103+
2. In a separate terminal, run the accessibility tests:
104+
```bash
105+
npm run test:a11y
106+
```
107+
108+
Alternatively, use the combined script that starts the server and runs tests:
109+
```bash
110+
npm run test:a11y:local
111+
```
112+
113+
For a colorful summary with statistics:
114+
```bash
115+
npm run test:a11y:summary
116+
```
117+
118+
This will display:
119+
- Total URLs tested with pass/fail ratio
120+
- Total accessibility errors found
121+
- Accessibility standard (WCAG 2.0 AA)
122+
- Test engine (axe-core via pa11y-ci)
123+
- Top 10 components with the most issues
124+
125+
The tests will check all 33 components for accessibility issues and report any violations found.

0 commit comments

Comments
 (0)