Skip to content

Commit b52b46e

Browse files
webstackdevwebstackdev
committed
Fix hobitied ARIA attribute on Masodon, Highlighter, and Social Shares element
1 parent a5eb44d commit b52b46e

6 files changed

Lines changed: 78 additions & 123 deletions

File tree

‎axe-results-incomplete.json‎

Lines changed: 72 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[
22
{
3-
"id": "aria-valid-attr-value",
4-
"impact": "critical",
3+
"id": "aria-prohibited-attr",
4+
"impact": "serious",
55
"tags": [
66
"cat.aria",
77
"wcag2a",
@@ -11,185 +11,145 @@
1111
"RGAAv4",
1212
"RGAA-7.1.1"
1313
],
14-
"description": "Ensure all ARIA attributes have valid values",
15-
"help": "ARIA attributes must conform to valid values",
16-
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright",
14+
"description": "Ensure ARIA attributes are not prohibited for an element's role",
15+
"help": "Elements must only use permitted ARIA attributes",
16+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-prohibited-attr?application=playwright",
1717
"nodes": [
1818
{
1919
"any": [],
20-
"all": [
21-
{
22-
"id": "aria-valid-attr-value",
23-
"data": {
24-
"messageKey": "noId",
25-
"needsReview": "aria-labelledby=\"carousel-articles-suggested-all-title\""
26-
},
27-
"relatedNodes": [],
28-
"impact": "critical",
29-
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
30-
}
31-
],
32-
"none": [],
33-
"impact": "critical",
34-
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-all-title\" data-astro-cid-kfjqoxel=\"\">",
35-
"target": [
36-
".mb-0:nth-child(1) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
37-
],
38-
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
39-
},
40-
{
41-
"any": [],
42-
"all": [
43-
{
44-
"id": "aria-valid-attr-value",
45-
"data": {
46-
"messageKey": "noId",
47-
"needsReview": "aria-labelledby=\"carousel-articles-suggested-all-title\""
48-
},
49-
"relatedNodes": [],
50-
"impact": "critical",
51-
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
52-
}
53-
],
54-
"none": [],
55-
"impact": "critical",
56-
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-all-title\" data-astro-cid-kfjqoxel=\"\">",
57-
"target": [
58-
".mb-0:nth-child(2) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
59-
],
60-
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
61-
},
62-
{
63-
"any": [],
64-
"all": [
65-
{
66-
"id": "aria-valid-attr-value",
67-
"data": {
68-
"messageKey": "noId",
69-
"needsReview": "aria-labelledby=\"carousel-articles-suggested-all-title\""
70-
},
71-
"relatedNodes": [],
72-
"impact": "critical",
73-
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
74-
}
75-
],
76-
"none": [],
77-
"impact": "critical",
78-
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-all-title\" data-astro-cid-kfjqoxel=\"\">",
79-
"target": [
80-
".mb-0:nth-child(3) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
81-
],
82-
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
83-
},
84-
{
85-
"any": [],
86-
"all": [
20+
"all": [],
21+
"none": [
8722
{
88-
"id": "aria-valid-attr-value",
23+
"id": "aria-prohibited-attr",
8924
"data": {
90-
"messageKey": "noId",
91-
"needsReview": "aria-labelledby=\"carousel-articles-suggested-all-title\""
25+
"role": null,
26+
"nodeName": "highlighter-element",
27+
"messageKey": "noRoleSingular",
28+
"prohibited": [
29+
"aria-label"
30+
]
9231
},
9332
"relatedNodes": [],
94-
"impact": "critical",
95-
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
33+
"impact": "serious",
34+
"message": "aria-label attribute is not well supported on a highlighter-element with no valid role attribute."
9635
}
9736
],
98-
"none": [],
99-
"impact": "critical",
100-
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-all-title\" data-astro-cid-kfjqoxel=\"\">",
37+
"impact": "serious",
38+
"html": "<highlighter-element aria-label=\"Share this insight\">",
10139
"target": [
102-
".mb-0:nth-child(4) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
40+
"highlighter-element"
10341
],
104-
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
42+
"failureSummary": "Fix all of the following:\n aria-label attribute is not well supported on a highlighter-element with no valid role attribute."
10543
},
10644
{
10745
"any": [],
108-
"all": [
46+
"all": [],
47+
"none": [
10948
{
110-
"id": "aria-valid-attr-value",
49+
"id": "aria-prohibited-attr",
11150
"data": {
112-
"messageKey": "noId",
113-
"needsReview": "aria-labelledby=\"carousel-articles-suggested-all-title\""
51+
"role": null,
52+
"nodeName": "section",
53+
"messageKey": "noRoleSingular",
54+
"prohibited": [
55+
"aria-labelledby"
56+
]
11457
},
11558
"relatedNodes": [],
116-
"impact": "critical",
117-
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
59+
"impact": "serious",
60+
"message": "aria-labelledby attribute is not well supported on a section with no valid role attribute."
11861
}
11962
],
120-
"none": [],
121-
"impact": "critical",
122-
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-all-title\" data-astro-cid-kfjqoxel=\"\">",
63+
"impact": "serious",
64+
"html": "<section aria-labelledby=\"article-share-title\">",
12365
"target": [
124-
".mb-0:nth-child(5) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
66+
"section[aria-labelledby=\"article-share-title\"]"
12567
],
126-
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
127-
},
68+
"failureSummary": "Fix all of the following:\n aria-labelledby attribute is not well supported on a section with no valid role attribute."
69+
}
70+
]
71+
},
72+
{
73+
"id": "aria-valid-attr-value",
74+
"impact": "critical",
75+
"tags": [
76+
"cat.aria",
77+
"wcag2a",
78+
"wcag412",
79+
"EN-301-549",
80+
"EN-9.4.1.2",
81+
"RGAAv4",
82+
"RGAA-7.1.1"
83+
],
84+
"description": "Ensure all ARIA attributes have valid values",
85+
"help": "ARIA attributes must conform to valid values",
86+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/aria-valid-attr-value?application=playwright",
87+
"nodes": [
12888
{
12989
"any": [],
13090
"all": [
13191
{
13292
"id": "aria-valid-attr-value",
13393
"data": {
134-
"messageKey": "noId",
135-
"needsReview": "aria-labelledby=\"carousel-articles-suggested-all-title\""
94+
"messageKey": "controlsWithinPopup",
95+
"needsReview": "aria-controls=\"mastodon-modal\""
13696
},
13797
"relatedNodes": [],
13898
"impact": "critical",
139-
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
99+
"message": "Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls=\"mastodon-modal\""
140100
}
141101
],
142102
"none": [],
143103
"impact": "critical",
144-
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-all-title\" data-astro-cid-kfjqoxel=\"\">",
104+
"html": "<button type=\"button\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Mastodon\" aria-haspopup=\"dialog\" aria-controls=\"mastodon-modal\" data-platform=\"mastodon\" data-share=\"mastodon\" data-share-text=\"Demo Page - This is ...\">",
145105
"target": [
146-
".mb-0:nth-child(6) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
106+
"social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-mastodon.hover\\:bg-mastodon-active[aria-haspopup=\"dialog\"]"
147107
],
148-
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
108+
"failureSummary": "Fix all of the following:\n Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls=\"mastodon-modal\""
149109
},
150110
{
151111
"any": [],
152112
"all": [
153113
{
154114
"id": "aria-valid-attr-value",
155115
"data": {
156-
"messageKey": "noId",
157-
"needsReview": "aria-labelledby=\"carousel-articles-suggested-all-title\""
116+
"messageKey": "noIdShadow",
117+
"needsReview": "aria-labelledby=\"article-share-title\""
158118
},
159119
"relatedNodes": [],
160120
"impact": "critical",
161-
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
121+
"message": "ARIA attribute element ID does not exist on the page or is a descendant of a different shadow DOM tree: aria-labelledby=\"article-share-title\""
162122
}
163123
],
164124
"none": [],
165125
"impact": "critical",
166-
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-all-title\" data-astro-cid-kfjqoxel=\"\">",
126+
"html": "<section aria-labelledby=\"article-share-title\">",
167127
"target": [
168-
".mb-0:nth-child(7) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
128+
"section[aria-labelledby=\"article-share-title\"]"
169129
],
170-
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
130+
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page or is a descendant of a different shadow DOM tree: aria-labelledby=\"article-share-title\""
171131
},
172132
{
173133
"any": [],
174134
"all": [
175135
{
176136
"id": "aria-valid-attr-value",
177137
"data": {
178-
"messageKey": "noId",
179-
"needsReview": "aria-labelledby=\"carousel-articles-suggested-all-title\""
138+
"messageKey": "controlsWithinPopup",
139+
"needsReview": "aria-controls=\"mastodon-modal\""
180140
},
181141
"relatedNodes": [],
182142
"impact": "critical",
183-
"message": "ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
143+
"message": "Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls=\"mastodon-modal\""
184144
}
185145
],
186146
"none": [],
187147
"impact": "critical",
188-
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-all-title\" data-astro-cid-kfjqoxel=\"\">",
148+
"html": "<button type=\"button\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Mastodon\" aria-haspopup=\"dialog\" aria-controls=\"mastodon-modal\" data-platform=\"mastodon\" data-share=\"mastodon\" data-share-text=\"Demo Article - Markd...\">",
189149
"target": [
190-
".mb-0:nth-child(8) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
150+
".gap-6.flex-col.flex > .mx-6.md\\:items-center.md\\:flex-row > .sm\\:pl-12.md\\:flex-1.w-full > social-share-element > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-mastodon.hover\\:bg-mastodon-active[aria-haspopup=\"dialog\"]"
191151
],
192-
"failureSummary": "Fix all of the following:\n ARIA attribute element ID does not exist on the page: aria-labelledby=\"carousel-articles-suggested-all-title\""
152+
"failureSummary": "Fix all of the following:\n Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls=\"mastodon-modal\""
193153
}
194154
]
195155
}

‎src/components/Content/Layout/index.astro‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,7 @@ const isDeepDive = section === 'Deep Dive Articles'
7979
}
8080

8181
{/** SLOT: after-content */}
82-
<section
83-
aria-labelledby="article-share-title"
84-
slot="after-content"
85-
>
82+
<section slot="after-content">
8683
<WebMentions url={`https://www.webstackbuilders.com${path}`} />
8784
{!isDeepDive && (
8885
<div class="flex flex-col gap-6">

‎src/components/Social/Highlighter/client/__tests__/index.spec.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,8 @@ describe('HighlighterElement', () => {
157157
expect(element.shadowRoot).toBeNull()
158158
expect(element.querySelector('.share-dialog')).not.toBeNull()
159159
expect(element.querySelectorAll('.share-button')).toHaveLength(mockPlatforms.length)
160-
expect(element.getAttribute('aria-label')).toBe(defaultProps.ariaLabel)
160+
expect(element.getAttribute('aria-label')).toBeNull()
161+
expect(element.getAttribute('share-label')).toBe(defaultProps.ariaLabel)
161162

162163
const trigger = element.querySelector('.highlighter__trigger') as HTMLButtonElement | null
163164
expect(trigger).toBeTruthy()

‎src/components/Social/Highlighter/client/index.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class HighlighterElement extends LitElement {
4242
static registeredName = COMPONENT_TAG_NAME
4343

4444
static override properties = {
45-
label: { type: String, attribute: 'aria-label', reflect: true },
45+
label: { type: String, attribute: 'share-label', reflect: true },
4646
}
4747

4848
declare label: string
@@ -93,9 +93,6 @@ export class HighlighterElement extends LitElement {
9393
if (!this.label) {
9494
this.label = 'Share this'
9595
}
96-
if (!this.hasAttribute('aria-label')) {
97-
this.setAttribute('aria-label', this.label)
98-
}
9996
this.attachHostListeners()
10097
}
10198

‎src/components/Social/Highlighter/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,4 @@ export interface Props {
3434
const { ariaLabel, class: className } = Astro.props
3535
---
3636

37-
<highlighter-element aria-label={ariaLabel}><span class:list={['text-content', 'bg-warning-inverse', 'rounded', 'px-2', 'py-0.5', className]}><slot /></span></highlighter-element>
37+
<highlighter-element share-label={ariaLabel}><span class:list={['text-content', 'bg-warning-inverse', 'rounded', 'px-2', 'py-0.5', className]}><slot /></span></highlighter-element>

‎src/components/Social/Mastodon/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const iconBankId = 'mastodon-modal-icon-bank'
2525
</span>
2626
</div>
2727

28-
<mastodon-modal-element id={id} modal-id={id}></mastodon-modal-element>
28+
<mastodon-modal-element modal-id={id}></mastodon-modal-element>
2929

3030
<script>
3131
import { mastodonDataConsentRevokeListener } from '@components/scripts/store'

0 commit comments

Comments
 (0)