Skip to content

Commit ed6599d

Browse files
webstackdevwebstackdev
committed
Update looping in Axe test
1 parent f602f6a commit ed6599d

4 files changed

Lines changed: 80 additions & 85 deletions

File tree

‎axe-results-incomplete.json‎

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +0,0 @@
1-
[
2-
{
3-
"id": "video-caption",
4-
"impact": "critical",
5-
"tags": [
6-
"cat.text-alternatives",
7-
"wcag2a",
8-
"wcag122",
9-
"section508",
10-
"section508.22.a",
11-
"TTv5",
12-
"TT17.a",
13-
"EN-301-549",
14-
"EN-9.1.2.2",
15-
"RGAAv4",
16-
"RGAA-4.3.1"
17-
],
18-
"description": "Ensure <video> elements have captions",
19-
"help": "<video> elements must have captions",
20-
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/video-caption?application=playwright",
21-
"nodes": [
22-
{
23-
"any": [],
24-
"all": [],
25-
"none": [
26-
{
27-
"id": "caption",
28-
"data": null,
29-
"relatedNodes": [],
30-
"impact": "critical",
31-
"message": "Check that captions are available for the element"
32-
}
33-
],
34-
"impact": "critical",
35-
"html": "<video controls=\"\" preload=\"metadata\" width=\"100%\" class=\"block mx-auto mb-8 max-w-full h-auto rounded-lg shadow-md text-gray-500 italic text-center\"><source src=\"/videos/sample-video-1.mp4\" type=\"video/mp4\"></video>",
36-
"target": [
37-
"video"
38-
],
39-
"failureSummary": "Fix all of the following:\n Check that captions are available for the element"
40-
}
41-
]
42-
}
43-
]

‎axe-results-violations.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
[]

‎test/e2e/specs/11-accessibility/axe.spec.ts‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,52 @@ import { BasePage, describe, test, expect } from '@test/e2e/helpers'
77
import { runAcrossPages } from '@test/e2e/helpers/runAcrossPages'
88

99
// https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md?plain=1
10-
11-
/*
1210
const axeTags = [
13-
'cat.aria' // Rules related to Accessible Rich Internet Applications (ARIA) attributes and roles.
14-
'cat.color' // Rules related to color contrast and meaning conveyed by color.
15-
'cat.controls' // Rules for interactive controls, such as form elements and links.
16-
'cat.forms' // Rules specifically for forms, form fields, and their labels.
17-
'cat.keyboard' // Rules related to keyboard operability.
18-
'cat.links' // Rules for links, including their names and destinations.
19-
'cat.name-role-value' // Rules that check if an element has a name, role, and value that can be correctly interpreted by assistive technologies.
20-
'cat.semantics' // Rules related to the semantic structure of a document, such as headings and landmarks.
21-
'cat.sensory-and-visual-cues' // Rules that deal with information conveyed by sensory or visual characteristics.
22-
'cat.structure' // Rules related to the document's overall structure, like the proper nesting of elements.
23-
'cat.tables' // Rules for data tables, including headers and associations.
24-
'cat.text-alternatives' // Rules for ensuring that text alternatives are provided for non-text content, such as images.
11+
'cat.aria', // Rules related to Accessible Rich Internet Applications (ARIA) attributes and roles.
12+
'cat.controls', // Rules for interactive controls, such as form elements and links.
13+
'cat.forms', // Rules specifically for forms, form fields, and their labels.
14+
'cat.keyboard', // Rules related to keyboard operability.
15+
'cat.links', // Rules for links, including their names and destinations.
16+
'cat.name-role-value', // Rules that check if an element has a name, role, and value that can be correctly interpreted by assistive technologies.
17+
'cat.semantics', // Rules related to the semantic structure of a document, such as headings and landmarks.
18+
'cat.sensory-and-visual-cues', // Rules that deal with information conveyed by sensory or visual characteristics.
19+
'cat.structure', // Rules related to the document's overall structure, like the proper nesting of elements.
20+
'cat.tables', // Rules for data tables, including headers and associations.
21+
'cat.text-alternatives', // Rules for ensuring that text alternatives are provided for non-text content, such as images.
2522
]
26-
*/
2723

2824
describe('WCAG Compliance', () => {
29-
test.only('run axe audit on all main pages', async ({ page: playwrightPage }) => {
25+
axeTags.forEach((axeTag) => {
26+
test.skip(`Run axe audit on all main pages for ${axeTag}`, async ({ page: playwrightPage }) => {
27+
test.slow()
28+
test.setTimeout(90_000)
29+
30+
const page = await BasePage.init(playwrightPage)
31+
await runAcrossPages(page, `check ${axeTag}`, async (url) => {
32+
await page.goto(url)
33+
const results = await new AxeBuilder({ page: page.page })
34+
.withTags(axeTag)
35+
.analyze()
36+
37+
expect(results.violations).toEqual([])
38+
expect(results.incomplete).toEqual([])
39+
})
40+
})
41+
})
42+
43+
test.skip(
44+
'Axe test for color contrast and meaning conveyed by color',
45+
async ({ page: playwrightPage }
46+
) => {
3047
test.slow()
3148
test.setTimeout(90_000)
3249

3350
const page = await BasePage.init(playwrightPage)
3451
await runAcrossPages(page, 'check forms', async (url) => {
3552
await page.goto(url)
3653
const results = await new AxeBuilder({ page: page.page })
37-
.withTags(['cat.text-alternatives'])
38-
//.disableRules('color-contrast-enhanced')
54+
.withTags('cat.color')
55+
.disableRules('color-contrast-enhanced')
3956
.analyze()
4057

4158
const incompleteResultsString = JSON.stringify(results.incomplete, null, 2)

‎test/e2e/specs/11-accessibility/high-contrast-wcag-compliance.spec.ts‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,59 @@
22
* WCAG Compliance Tests
33
* Tests for Web Content Accessibility Guidelines compliance
44
*/
5+
import { writeFileSync } from 'fs'
6+
import AxeBuilder from '@axe-core/playwright'
57
import { BasePage, describe, test, expect } from '@test/e2e/helpers'
8+
import { runAcrossPages } from '@test/e2e/helpers/runAcrossPages'
69
import { waitForAnimationFrames } from '@test/e2e/helpers/waitHelpers'
710

811
// @TODO: The purpose of this file is to have a special test for the "a11y" theme that should meet the higher WCAG 2.2 standards. Those standards require higher contrast ratios and other improvements.
912

13+
const wcagTheme = 'a11y'
14+
1015
describe('WCAG Compliance', () => {
11-
/**
12-
* Axe by defaults checks for color contrast of at least 4.5:1 for small text or 3:1 for
13-
* large text, even if text is part of an image. Large text has been defined in the
14-
* requirements as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels). Note: Elements
15-
* found to have a 1:1 ratio are considered "incomplete" and require a manual review.
16-
*/
17-
test.skip('@ready text has sufficient color contrast', async ({ page: playwrightPage }) => {
16+
test.skip('run axe enhanced color contrast audit on all main pages in a11y theme', async ({ page: playwrightPage }) => {
17+
test.slow()
18+
test.setTimeout(90_000)
19+
1820
const page = await BasePage.init(playwrightPage)
19-
await page.goto('/')
20-
21-
// Sample a few text elements
22-
const paragraphs = page.locator('p').first()
23-
const hasVisibleText = await paragraphs.isVisible()
24-
25-
if (hasVisibleText) {
26-
const contrast = await paragraphs.evaluate((el) => {
27-
const styles = window.getComputedStyle(el)
28-
return {
29-
color: styles.color,
30-
backgroundColor: styles.backgroundColor,
21+
22+
await page.page.addInitScript((themeId) => {
23+
document.documentElement.setAttribute('data-theme', themeId)
24+
25+
try {
26+
window.localStorage.setItem('theme', themeId)
27+
} catch {
28+
// Ignore localStorage write failures in constrained browser contexts.
29+
}
30+
}, wcagTheme)
31+
32+
await runAcrossPages(page, 'check enhanced color contrast in a11y theme', async (url) => {
33+
await page.goto(url)
34+
35+
await page.page.waitForFunction((themeId) => {
36+
const activeTheme = document.documentElement.getAttribute('data-theme')
37+
38+
try {
39+
return activeTheme === themeId && window.localStorage.getItem('theme') === themeId
40+
} catch {
41+
return activeTheme === themeId
3142
}
32-
})
43+
}, wcagTheme)
44+
await waitForAnimationFrames(page.page, 2)
45+
46+
const results = await new AxeBuilder({ page: page.page })
47+
.withRules(['color-contrast-enhanced'])
48+
.analyze()
49+
50+
const incompleteResultsString = JSON.stringify(results.incomplete, null, 2)
51+
writeFileSync('axe-results-incomplete.json', incompleteResultsString, 'utf8')
52+
53+
const violationResultsString = JSON.stringify(results.violations, null, 2)
54+
writeFileSync('axe-results-violations.json', violationResultsString, 'utf8')
3355

34-
// Basic check that colors are defined
35-
expect(contrast.color).toBeTruthy()
36-
}
56+
expect(results.violations).toEqual([])
57+
expect(results.incomplete).toEqual([])
58+
})
3759
})
3860
})

0 commit comments

Comments
 (0)