Skip to content

Commit cfd2b07

Browse files
webstackdevwebstackdev
committed
Make carousel heading IDs instance-unique, and stop treating the share card wrapper as a named landmark
1 parent 0c5ac7b commit cfd2b07

4 files changed

Lines changed: 215 additions & 41 deletions

File tree

‎axe-results-incomplete.json‎

Lines changed: 174 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,174 @@
1-
[]
1+
[
2+
{
3+
"id": "identical-links-same-purpose",
4+
"impact": "minor",
5+
"tags": [
6+
"cat.semantics",
7+
"wcag2aaa",
8+
"wcag249"
9+
],
10+
"description": "Ensure that links with the same accessible name serve a similar purpose",
11+
"help": "Links with the same name must have a similar purpose",
12+
"helpUrl": "https://dequeuniversity.com/rules/axe/4.11/identical-links-same-purpose?application=playwright",
13+
"nodes": [
14+
{
15+
"any": [],
16+
"all": [
17+
{
18+
"id": "identical-links-same-purpose",
19+
"data": {
20+
"name": "share on x",
21+
"urlProps": {
22+
"protocol": "http:",
23+
"hostname": "twitter.com",
24+
"port": "",
25+
"pathname": "/intent/tweet/",
26+
"search": {
27+
"text": "Demo Page - This is just a demo page to show how things work on the site",
28+
"url": "/articles/demo"
29+
},
30+
"hash": "",
31+
"filename": ""
32+
}
33+
},
34+
"relatedNodes": [
35+
{
36+
"html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://twitter.com/...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on X\" data-share=\"x\">",
37+
"target": [
38+
".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-x.hover\\:bg-x-active[data-share=\"x\"]"
39+
]
40+
}
41+
],
42+
"impact": "minor",
43+
"message": "Check that links have the same purpose, or are intentionally ambiguous."
44+
}
45+
],
46+
"none": [],
47+
"impact": "minor",
48+
"html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://twitter.com/...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on X\" data-share=\"x\">",
49+
"target": [
50+
"social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-x.hover\\:bg-x-active[data-share=\"x\"]"
51+
],
52+
"failureSummary": "Fix all of the following:\n Check that links have the same purpose, or are intentionally ambiguous."
53+
},
54+
{
55+
"any": [],
56+
"all": [
57+
{
58+
"id": "identical-links-same-purpose",
59+
"data": {
60+
"name": "share on linkedin",
61+
"urlProps": {
62+
"protocol": "http:",
63+
"hostname": "www.linkedin.com",
64+
"port": "",
65+
"pathname": "/sharing/share-offsite/",
66+
"search": {
67+
"url": "/articles/demo"
68+
},
69+
"hash": "",
70+
"filename": ""
71+
}
72+
},
73+
"relatedNodes": [
74+
{
75+
"html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.linkedin...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on LinkedIn\" data-share=\"linkedin\">",
76+
"target": [
77+
".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-linkedin.hover\\:bg-linkedin-active[data-share=\"linkedin\"]"
78+
]
79+
}
80+
],
81+
"impact": "minor",
82+
"message": "Check that links have the same purpose, or are intentionally ambiguous."
83+
}
84+
],
85+
"none": [],
86+
"impact": "minor",
87+
"html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.linkedin...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on LinkedIn\" data-share=\"linkedin\">",
88+
"target": [
89+
"social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-linkedin.hover\\:bg-linkedin-active[data-share=\"linkedin\"]"
90+
],
91+
"failureSummary": "Fix all of the following:\n Check that links have the same purpose, or are intentionally ambiguous."
92+
},
93+
{
94+
"any": [],
95+
"all": [
96+
{
97+
"id": "identical-links-same-purpose",
98+
"data": {
99+
"name": "share on bluesky",
100+
"urlProps": {
101+
"protocol": "http:",
102+
"hostname": "bsky.app",
103+
"port": "",
104+
"pathname": "/intent/compose/",
105+
"search": {
106+
"text": "Demo Page - This is just a demo page to show how things work on the site /articles/demo"
107+
},
108+
"hash": "",
109+
"filename": ""
110+
}
111+
},
112+
"relatedNodes": [
113+
{
114+
"html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://bsky.app/int...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Bluesky\" data-share=\"bluesky\">",
115+
"target": [
116+
".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-bluesky.hover\\:bg-bluesky-active[data-share=\"bluesky\"]"
117+
]
118+
}
119+
],
120+
"impact": "minor",
121+
"message": "Check that links have the same purpose, or are intentionally ambiguous."
122+
}
123+
],
124+
"none": [],
125+
"impact": "minor",
126+
"html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://bsky.app/int...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Bluesky\" data-share=\"bluesky\">",
127+
"target": [
128+
"social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-bluesky.hover\\:bg-bluesky-active[data-share=\"bluesky\"]"
129+
],
130+
"failureSummary": "Fix all of the following:\n Check that links have the same purpose, or are intentionally ambiguous."
131+
},
132+
{
133+
"any": [],
134+
"all": [
135+
{
136+
"id": "identical-links-same-purpose",
137+
"data": {
138+
"name": "share on reddit",
139+
"urlProps": {
140+
"protocol": "http:",
141+
"hostname": "reddit.com",
142+
"port": "",
143+
"pathname": "/submit/",
144+
"search": {
145+
"url": "/articles/demo",
146+
"title": "Demo Page"
147+
},
148+
"hash": "",
149+
"filename": ""
150+
}
151+
},
152+
"relatedNodes": [
153+
{
154+
"html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://reddit.com/s...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Reddit\" data-share=\"reddit\">",
155+
"target": [
156+
".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-reddit.hover\\:bg-reddit-active[data-share=\"reddit\"]"
157+
]
158+
}
159+
],
160+
"impact": "minor",
161+
"message": "Check that links have the same purpose, or are intentionally ambiguous."
162+
}
163+
],
164+
"none": [],
165+
"impact": "minor",
166+
"html": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://reddit.com/s...\" class=\"_button_1qagh_1 soci...\" aria-label=\"Share on Reddit\" data-share=\"reddit\">",
167+
"target": [
168+
"social-share-element[url=\"/articles/demo\"] > .social-share.max-sm\\:justify-center[aria-label=\"Share this content\"] > .bg-reddit.hover\\:bg-reddit-active[data-share=\"reddit\"]"
169+
],
170+
"failureSummary": "Fix all of the following:\n Check that links have the same purpose, or are intentionally ambiguous."
171+
}
172+
]
173+
}
174+
]

‎axe-results-violations.json‎

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,49 +16,42 @@
1616
"id": "landmark-is-unique",
1717
"data": {
1818
"role": "region",
19-
"accessibleText": null
19+
"accessibleText": "with title link"
2020
},
2121
"relatedNodes": [
2222
{
23-
"html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
23+
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-demo/index-title\" data-astro-cid-kfjqoxel=\"\">",
2424
"target": [
25-
".mb-0:nth-child(2) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
25+
"carousel-slider[data-carousel-navigation-mode=\"bounded\"] > .py-8.max-w-6xl.lg\\:px-8 > .embla[role=\"region\"][data-astro-cid-kfjqoxel=\"\"]"
2626
]
27-
},
28-
{
29-
"html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
30-
"target": [
31-
".mb-0:nth-child(3) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
32-
]
33-
},
34-
{
35-
"html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
36-
"target": [
37-
".mb-0:nth-child(4) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
38-
]
39-
},
40-
{
41-
"html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
42-
"target": [
43-
".mb-0:nth-child(5) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
44-
]
45-
},
46-
{
47-
"html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
48-
"target": [
49-
".mb-0:nth-child(6) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
50-
]
51-
},
52-
{
53-
"html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
54-
"target": [
55-
".mb-0:nth-child(7) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
56-
]
57-
},
27+
}
28+
],
29+
"impact": "moderate",
30+
"message": "The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
31+
}
32+
],
33+
"all": [],
34+
"none": [],
35+
"impact": "moderate",
36+
"html": "<div class=\"embla relative\" role=\"region\" aria-labelledby=\"carousel-articles-suggested-demo/index-title\" data-astro-cid-kfjqoxel=\"\">",
37+
"target": [
38+
"carousel-slider[data-carousel-navigation-mode=\"wrap\"] > .py-8.max-w-6xl.lg\\:px-8 > .embla[role=\"region\"][data-astro-cid-kfjqoxel=\"\"]"
39+
],
40+
"failureSummary": "Fix any of the following:\n The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
41+
},
42+
{
43+
"any": [
44+
{
45+
"id": "landmark-is-unique",
46+
"data": {
47+
"role": "region",
48+
"accessibleText": "share this article"
49+
},
50+
"relatedNodes": [
5851
{
59-
"html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
52+
"html": "<section class=\"rounded-lg bg-page-offset flex flex-col md:flex-row items-start md:items-center p-6 mx-6\" aria-labelledby=\"social-share-icon-bank-6dq3mht114y-heading\">",
6053
"target": [
61-
".mb-0:nth-child(8) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
54+
".gap-6.flex-col.flex > .mx-6.md\\:items-center.md\\:flex-row"
6255
]
6356
}
6457
],
@@ -69,9 +62,9 @@
6962
"all": [],
7063
"none": [],
7164
"impact": "moderate",
72-
"html": "<div class=\"embla relative\" role=\"region\" data-astro-cid-kfjqoxel=\"\">",
65+
"html": "<section class=\"rounded-lg bg-page-offset flex flex-col md:flex-row items-start md:items-center p-6 mx-6\" aria-labelledby=\"social-share-icon-bank-bqai9oray59-heading\">",
7366
"target": [
74-
".mb-0:nth-child(1) > carousel-slider > .py-8.lg\\:px-8.px-4 > .embla.relative[role=\"region\"]"
67+
".markdown-content__prose > .mx-6.md\\:items-center.md\\:flex-row"
7568
],
7669
"failureSummary": "Fix any of the following:\n The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable"
7770
}

‎src/components/Carousel/index.astro‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@ import {
1414
} from './@types'
1515
import { prepareItems } from './server'
1616
17+
const toIdFragment = (value: string): string => {
18+
return value
19+
.trim()
20+
.toLowerCase()
21+
.replace(/[^a-z0-9]+/g, '-')
22+
.replace(/(^-|-$)/g, '')
23+
}
24+
1725
type BaseProps = {
1826
title?: string
1927
/** A link to apply to the carousel title */
@@ -72,7 +80,8 @@ const allItems: ItemType[] = itemsOverride
7280
7381
const items = prepareItems(allItems, variant, currentSlug, limit)
7482
75-
const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
83+
const carouselIdParts = [type, variant, currentSlug ?? 'all', navigationMode, title ?? 'untitled']
84+
const carouselId = `carousel-${carouselIdParts.map(toIdFragment).filter(Boolean).join('-')}`
7685
const carouselRegionLabelledBy = title ? `${carouselId}-title` : undefined
7786
const carouselRegionRole = carouselRegionLabelledBy ? 'region' : undefined
7887
---

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ const shareHeadingId = `${iconBankId}-heading`
6060

6161
<section
6262
class="rounded-lg bg-page-offset flex flex-col md:flex-row items-start md:items-center p-6 mx-6"
63-
aria-labelledby={shareHeadingId}
6463
>
6564
<div class="h-full w-full sm:border-r sm:border-trim sm:w-auto sm:shrink-0 sm:pr-12">
6665
<h2

0 commit comments

Comments
 (0)