Skip to content

Commit 728c608

Browse files
leonardomendixleonardomendix
authored
[WC-1984] Add a11y testing for data widgets (#645)
2 parents d26dc2f + d13e527 commit 728c608

File tree

14 files changed

+325
-6
lines changed

14 files changed

+325
-6
lines changed

‎automation/run-e2e/support/commands.mjs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,3 +143,21 @@ const waitUntil = (subject, checkFunction, originalOptions = {}) => {
143143
};
144144

145145
Cypress.Commands.add("waitUntil", { prevSubject: "optional" }, waitUntil);
146+
147+
Cypress.Commands.add("terminalLog", violations => {
148+
cy.task(
149+
"log",
150+
`${violations.length} accessibility violation${violations.length === 1 ? "" : "s"} ${
151+
violations.length === 1 ? "was" : "were"
152+
} detected`
153+
);
154+
// pluck specific keys to keep the table readable
155+
const violationData = violations.map(({ id, impact, description, nodes }) => ({
156+
id,
157+
impact,
158+
description,
159+
nodes: nodes.length
160+
}));
161+
162+
cy.task("table", violationData);
163+
});

‎packages/pluggableWidgets/datagrid-date-filter-web/cypress/integration/DataGridDateFilter.spec.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,34 @@ describe("datagrid-date-filter-web", () => {
5555
cy.get(".mx-name-dataGrid21 [role=row]").should("have.length", 1 + 10);
5656
});
5757
});
58+
describe("a11y testing:", () => {
59+
it("checks accessibility violations", () => {
60+
cy.visit("/");
61+
cy.injectAxe();
62+
cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
63+
cy.configureAxe({
64+
//TODO: Skipped some rules as we still need to review them
65+
rules: [
66+
{ id: "aria-required-children", reviewOnFail: true },
67+
{ id: "label", reviewOnFail: true },
68+
{ id: "aria-roles", reviewOnFail: true },
69+
{ id: "button-name", reviewOnFail: true },
70+
{ id: "duplicate-id-active", reviewOnFail: true },
71+
{ id: "duplicate-id", reviewOnFail: true },
72+
{ id: "aria-allowed-attr", reviewOnFail: true }
73+
]
74+
});
75+
// Test the widget at initial load
76+
cy.checkA11y(
77+
".mx-name-datagrid1",
78+
{
79+
runOnly: {
80+
type: "tag",
81+
values: ["wcag2a"]
82+
}
83+
},
84+
cy.terminalLog
85+
);
86+
});
87+
});
5888
});

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/cypress-visual-screenshots/baseline/DataGridDropDownFilter.spec-dataGridDropDownFilter-chrome.png‎

-95 Bytes
Loading

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/cypress-visual-screenshots/baseline/DataGridDropDownFilterAssociation.spec-dataGridDropDownFilter-chrome.png‎

3.11 KB
Loading

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/cypress/integration/DataGridDropDownFilter.spec.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,4 +146,33 @@ describe("datagrid-dropdown-filter-web", () => {
146146
cy.get(".mx-name-dataGrid25 .paging-status").should("have.text", "1 to 10 of 19");
147147
});
148148
});
149+
describe("a11y testing:", () => {
150+
it("checks accessibility violations", () => {
151+
cy.visit("/");
152+
cy.injectAxe();
153+
cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
154+
cy.configureAxe({
155+
//TODO: Skipped some rules as we still need to review them
156+
rules: [
157+
{ id: "aria-required-children", reviewOnFail: true },
158+
{ id: "label", reviewOnFail: true },
159+
{ id: "aria-roles", reviewOnFail: true },
160+
{ id: "button-name", reviewOnFail: true },
161+
{ id: "duplicate-id-active", reviewOnFail: true },
162+
{ id: "aria-allowed-attr", reviewOnFail: true }
163+
]
164+
});
165+
// Test the widget at initial load
166+
cy.checkA11y(
167+
".mx-name-datagrid1",
168+
{
169+
runOnly: {
170+
type: "tag",
171+
values: ["wcag2a"]
172+
}
173+
},
174+
cy.terminalLog
175+
);
176+
});
177+
});
149178
});

‎packages/pluggableWidgets/datagrid-number-filter-web/cypress/integration/DataGridNumberFilter.spec.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,33 @@ describe("datagrid-number-filter-web", () => {
3636
cy.get(".mx-name-dataGrid21 .paging-status").should("have.text", "1 to 2 of 2");
3737
});
3838
});
39+
describe("a11y testing:", () => {
40+
it("checks accessibility violations", () => {
41+
cy.visit("/");
42+
cy.injectAxe();
43+
cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
44+
cy.configureAxe({
45+
//TODO: Skipped some rules as we still need to review them
46+
rules: [
47+
{ id: "aria-required-children", reviewOnFail: true },
48+
{ id: "label", reviewOnFail: true },
49+
{ id: "aria-roles", reviewOnFail: true },
50+
{ id: "button-name", reviewOnFail: true },
51+
{ id: "duplicate-id-active", reviewOnFail: true },
52+
{ id: "duplicate-id", reviewOnFail: true }
53+
]
54+
});
55+
// Test the widget at initial load
56+
cy.checkA11y(
57+
".mx-name-datagrid1",
58+
{
59+
runOnly: {
60+
type: "tag",
61+
values: ["wcag2a"]
62+
}
63+
},
64+
cy.terminalLog
65+
);
66+
});
67+
});
3968
});

‎packages/pluggableWidgets/datagrid-text-filter-web/cypress/integration/DataGridTextFilter.spec.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,33 @@ describe("datagrid-text-filter-web", () => {
4444
cy.get(".mx-name-dataGrid21 .paging-status").should("have.text", "1 to 1 of 1");
4545
});
4646
});
47+
describe("a11y testing:", () => {
48+
it("checks accessibility violations", () => {
49+
cy.visit("/");
50+
cy.injectAxe();
51+
cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
52+
cy.configureAxe({
53+
//TODO: Skipped some rules as we still need to review them
54+
rules: [
55+
{ id: "aria-required-children", reviewOnFail: true },
56+
{ id: "label", reviewOnFail: true },
57+
{ id: "aria-roles", reviewOnFail: true },
58+
{ id: "button-name", reviewOnFail: true },
59+
{ id: "duplicate-id-active", reviewOnFail: true },
60+
{ id: "duplicate-id", reviewOnFail: true }
61+
]
62+
});
63+
// Test the widget at initial load
64+
cy.checkA11y(
65+
".mx-name-datagrid1",
66+
{
67+
runOnly: {
68+
type: "tag",
69+
values: ["wcag2a"]
70+
}
71+
},
72+
cy.terminalLog
73+
);
74+
});
75+
});
4776
});

‎packages/pluggableWidgets/datagrid-web/cypress/integration/DataGrid.spec.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,4 +126,30 @@ describe("datagrid-web", () => {
126126
cy.get(".mx-name-datagrid1").compareSnapshot(`datagrid-${browserName}`, 0.1);
127127
});
128128
});
129+
130+
describe("a11y testing:", () => {
131+
it("checks accessibility violations", () => {
132+
cy.visit("/");
133+
cy.injectAxe();
134+
cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
135+
cy.configureAxe({
136+
//TODO: Skipped some rules as we still need to review them
137+
rules: [
138+
{ id: "aria-required-children", reviewOnFail: true },
139+
{ id: "label", reviewOnFail: true }
140+
]
141+
});
142+
// Test the widget at initial load
143+
cy.checkA11y(
144+
".mx-name-datagrid1",
145+
{
146+
runOnly: {
147+
type: "tag",
148+
values: ["wcag2a"]
149+
}
150+
},
151+
cy.terminalLog
152+
);
153+
});
154+
});
129155
});

‎packages/pluggableWidgets/datagrid-web/cypress/integration/DataGridSelection.spec.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
function terminalLog(violations) {
2+
cy.task(
3+
"log",
4+
`${violations.length} accessibility violation${violations.length === 1 ? "" : "s"} ${
5+
violations.length === 1 ? "was" : "were"
6+
} detected`
7+
);
8+
// pluck specific keys to keep the table readable
9+
const violationData = violations.map(({ id, impact, description, nodes }) => ({
10+
id,
11+
impact,
12+
description,
13+
nodes: nodes.length
14+
}));
15+
16+
cy.task("table", violationData);
17+
}
118
describe("datagrid-web", () => {
219
const browserName = Cypress.browser.name;
320

@@ -43,4 +60,29 @@ describe("datagrid-web", () => {
4360
);
4461
});
4562
});
63+
describe("a11y testing:", () => {
64+
it("checks accessibility violations", () => {
65+
cy.visit("/p/multi-selection");
66+
cy.injectAxe();
67+
cy.wait(3000); // eslint-disable-line cypress/no-unnecessary-waiting
68+
cy.configureAxe({
69+
//TODO: Skipped some rules as we still need to review them
70+
rules: [
71+
{ id: "aria-required-children", reviewOnFail: true },
72+
{ id: "label", reviewOnFail: true }
73+
]
74+
});
75+
// Test the widget at initial load
76+
cy.checkA11y(
77+
".mx-name-dgMultiSelectionCheckbox",
78+
{
79+
runOnly: {
80+
type: "tag",
81+
values: ["wcag2a"]
82+
}
83+
},
84+
terminalLog
85+
);
86+
});
87+
});
4688
});

‎packages/pluggableWidgets/datagrid-web/cypress/integration/filtering/DataGridFilteringMulti.spec.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ describe("datagrid-web filtering multi select", () => {
1414
rows().should("have.length", 10 + 1);
1515
column(2).first().should("have.text", "Black");
1616
column(2).last().should("have.text", "Blue");
17-
enumSelect().click();
17+
enumSelect().first().click();
1818
option("Pink").click();
1919
rows().should("have.length", 5 + 1);
2020
option("Blush").click();
2121
rows().should("have.length", 7 + 1);
22-
enumSelect().click();
22+
enumSelect().first().click();
2323
column(2).should("have.text", "PinkPinkPinkBlushBlushPinkPink");
2424
});
2525

@@ -37,12 +37,12 @@ describe("datagrid-web filtering multi select", () => {
3737
];
3838

3939
column(3).first().should("have.text", expectedColumnText[0]);
40-
roleSelect().click();
40+
roleSelect().first().click();
4141
option("Economist").click();
4242
rows().should("have.length", 5 + 1);
4343
option("Public librarian").click();
4444
rows().should("have.length", 9 + 1);
45-
roleSelect().click();
45+
roleSelect().first().click();
4646
column(3).each((cell, index) => {
4747
expect(cell).to.have.text(expectedColumnText[index]);
4848
});
@@ -52,12 +52,12 @@ describe("datagrid-web filtering multi select", () => {
5252
rows().should("have.length", 10 + 1);
5353
column(4).first().should("have.text", "W.R. Berkley Corporation");
5454
column(4).last().should("have.text", "PETsMART Inc");
55-
companySelect().click();
55+
companySelect().first().click();
5656
option("FMC Corp").click();
5757
rows().should("have.length", 1 + 1);
5858
option("ALLETE, Inc.").click();
5959
rows().should("have.length", 5 + 1);
60-
companySelect().click();
60+
companySelect().first().click();
6161
column(4).should("have.text", "ALLETE, Inc.FMC CorpALLETE, Inc.ALLETE, Inc.ALLETE, Inc.");
6262
});
6363
});

0 commit comments

Comments
 (0)