Skip to content

Commit 20c5c76

Browse files
webstackdevwebstackdev
committed
Add h1 to newsletter confirmation state pages
1 parent b9afaa5 commit 20c5c76

3 files changed

Lines changed: 31 additions & 29 deletions

File tree

‎axe-results-violations.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
[
22
{
3-
"id": "heading-order",
3+
"id": "page-has-heading-one",
44
"impact": "moderate",
55
"tags": [
66
"cat.semantics",
77
"best-practice"
88
],
9-
"description": "Ensure the order of headings is semantically correct",
10-
"help": "Heading levels should only increase by one",
11-
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/heading-order?application=playwright",
9+
"description": "Ensure that the page, or at least one of its frames contains a level-one heading",
10+
"help": "Page should contain a level-one heading",
11+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/page-has-heading-one?application=playwright",
1212
"nodes": [
1313
{
14-
"any": [
14+
"any": [],
15+
"all": [
1516
{
16-
"id": "heading-order",
17+
"id": "page-has-heading-one",
1718
"data": null,
1819
"relatedNodes": [],
1920
"impact": "moderate",
20-
"message": "Heading order invalid"
21+
"message": "Page must have a level-one heading"
2122
}
2223
],
23-
"all": [],
2424
"none": [],
2525
"impact": "moderate",
26-
"html": "<h3 class=\"inline-flex items-center gap-2 whitespace-nowrap text-xl text-page-inverse font-bold transition-colors no-underline\">",
26+
"html": "<html lang=\"en\" data-theme=\"light\" style=\"--theme-picker-offset: 0px; --header-current-height: 80px; --progress-bar-height: 0px; --layout-top-offset: 80px;\">",
2727
"target": [
28-
".md\\:flex-row.shadow-sm[href$=\"articles\"] > .p-6.grow.flex-col > .mb-4.gap-4.relative > h3"
28+
"html"
2929
],
30-
"failureSummary": "Fix any of the following:\n Heading order invalid"
30+
"failureSummary": "Fix all of the following:\n Page must have a level-one heading"
3131
}
3232
]
3333
}

‎src/components/Pages/Newsletter/Confirm/index.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,9 @@ const { token } = Astro.props
4545
classes="animate-spin"
4646
/>
4747
</div>
48-
<h2 class="text-2xl sm:text-3xl font-bold text-page-inverse" id="confirm-heading-loading" tabindex="-1">
48+
<h1 class="text-2xl sm:text-3xl font-bold text-page-inverse" id="confirm-heading-loading" tabindex="-1">
4949
Confirming Your Subscription
50-
</h2>
50+
</h1>
5151
</div>
5252
<div class="px-6 py-8 text-center">
5353
<p class="text-lg text-content-active mb-2">
@@ -71,9 +71,9 @@ const { token } = Astro.props
7171
size={10}
7272
/>
7373
</div>
74-
<h2 class="text-2xl sm:text-3xl font-bold text-page-inverse" id="confirm-heading-success" tabindex="-1">
74+
<h1 class="text-2xl sm:text-3xl font-bold text-page-inverse" id="confirm-heading-success" tabindex="-1">
7575
Subscription Confirmed!
76-
</h2>
76+
</h1>
7777
</div>
7878
<div class="px-6 py-8">
7979
<p class="text-lg text-content-active mb-2 text-center">
@@ -140,9 +140,9 @@ const { token } = Astro.props
140140
size={10}
141141
/>
142142
</div>
143-
<h2 class="text-2xl sm:text-3xl font-bold text-page-inverse" id="confirm-heading-expired" tabindex="-1">
143+
<h1 class="text-2xl sm:text-3xl font-bold text-page-inverse" id="confirm-heading-expired" tabindex="-1">
144144
Confirmation Link Expired
145-
</h2>
145+
</h1>
146146
</div>
147147
<div class="px-6 py-8">
148148
<p class="text-lg text-content-active text-center mb-2">

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,20 @@ import { runAcrossPages } from '@test/e2e/helpers/runAcrossPages'
99
// https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md?plain=1
1010

1111
/*
12-
cat.aria: Rules related to Accessible Rich Internet Applications (ARIA) attributes and roles.
13-
cat.color: Rules related to color contrast and meaning conveyed by color.
14-
cat.controls: Rules for interactive controls, such as form elements and links.
15-
cat.forms: Rules specifically for forms, form fields, and their labels.
16-
cat.keyboard: Rules related to keyboard operability.
17-
cat.links: Rules for links, including their names and destinations.
18-
cat.name-role-value: Rules that check if an element has a name, role, and value that can be correctly interpreted by assistive technologies.
19-
cat.semantics: Rules related to the semantic structure of a document, such as headings and landmarks.
20-
cat.sensory-and-visual-cues: Rules that deal with information conveyed by sensory or visual characteristics.
21-
cat.structure: Rules related to the document's overall structure, like the proper nesting of elements.
22-
cat.tables: Rules for data tables, including headers and associations.
23-
cat.text-alternatives: Rules for ensuring that text alternatives are provided for non-text content, such as images.
12+
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.
25+
]
2426
*/
2527

2628
describe('WCAG Compliance', () => {

0 commit comments

Comments
 (0)