Skip to content

Commit 498d65e

Browse files
reidbarberreidbarber
authored
docs: S2 docs accessibility fixes (#9328)
* add script for testing the docs with axe * fix react-aria docs axe issues * lint * use empty alt text
1 parent 0e15d66 commit 498d65e

File tree

11 files changed

+585
-54
lines changed

11 files changed

+585
-54
lines changed

‎bin/imports.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ const devDependencies = new Set([
2020
'@adobe/spectrum-css-temp',
2121
'@react-spectrum/style-macro-s1',
2222
'@parcel/macros',
23-
'@adobe/spectrum-tokens'
23+
'@adobe/spectrum-tokens',
24+
'playwright',
25+
'axe-playwright'
2426
]);
2527

2628
module.exports = {

‎packages/dev/s2-docs/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,5 +67,9 @@
6767
"alias": {
6868
"tailwind-starter": "../../../starters/tailwind/src",
6969
"vanilla-starter": "../../../starters/docs/src"
70+
},
71+
"devDependencies": {
72+
"axe-playwright": "^2.2.2",
73+
"playwright": "^1.57.0"
7074
}
7175
}

‎packages/dev/s2-docs/pages/react-aria/GridList.mdx‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -27,52 +27,52 @@ export const description = 'Displays a list of interactive items, with support f
2727

2828
<GridList/* PROPS */>
2929
<GridListItem textValue="Desert Sunset">
30-
<img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
30+
<img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} alt="" />
3131
<Text>Desert Sunset</Text>
3232
<Text slot="description">PNG • 2/3/2024</Text>
3333
</GridListItem>
3434
<GridListItem textValue="Hiking Trail">
35-
<img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
35+
<img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
3636
<Text>Hiking Trail</Text>
3737
<Text slot="description">JPEG • 1/10/2022</Text>
3838
</GridListItem>
3939
<GridListItem textValue="Lion">
40-
<img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
40+
<img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} alt="" />
4141
<Text>Lion</Text>
4242
<Text slot="description">JPEG • 8/28/2021</Text>
4343
</GridListItem>
4444
<GridListItem textValue="Mountain Sunrise">
45-
<img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
45+
<img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
4646
<Text>Mountain Sunrise</Text>
4747
<Text slot="description">PNG • 3/15/2015</Text>
4848
</GridListItem>
4949
<GridListItem textValue="Giraffe tongue">
50-
<img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
50+
<img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
5151
<Text>Giraffe tongue</Text>
5252
<Text slot="description">PNG • 11/27/2019</Text>
5353
</GridListItem>
5454
<GridListItem textValue="Golden Hour">
55-
<img src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} />
55+
<img src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} alt="" />
5656
<Text>Golden Hour</Text>
5757
<Text slot="description">WEBP • 7/24/2024</Text>
5858
</GridListItem>
5959
<GridListItem textValue="Architecture">
60-
<img src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
60+
<img src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} alt="" />
6161
<Text>Architecture</Text>
6262
<Text slot="description">PNG • 12/24/2016</Text>
6363
</GridListItem>
6464
<GridListItem textValue="Peeking leopard">
65-
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
65+
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} alt="" />
6666
<Text>Peeking leopard</Text>
6767
<Text slot="description">JPEG • 3/2/2016</Text>
6868
</GridListItem>
6969
<GridListItem textValue="Roofs">
70-
<img src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
70+
<img src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} alt="" />
7171
<Text>Roofs</Text>
7272
<Text slot="description">JPEG • 4/24/2025</Text>
7373
</GridListItem>
7474
<GridListItem textValue="Half Dome Deer">
75-
<img src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={990} />
75+
<img src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={990} alt="" />
7676
<Text>Half Dome Deer</Text>
7777
<Text slot="description">DNG • 8/28/2018</Text>
7878
</GridListItem>
@@ -352,7 +352,7 @@ function Example() {
352352
{/*- end highlight -*/}
353353
{(image) => (
354354
<GridListItem textValue={image.title}>
355-
<img src={image.image} width={image.width} height={image.height} />
355+
<img src={image.image} width={image.width} height={image.height} alt="" />
356356
<Text>{image.title}</Text>
357357
<Text slot="description">By {image.user}</Text>
358358
</GridListItem>
@@ -400,7 +400,7 @@ function AsyncLoadingExample() {
400400
<Collection items={list.items}>
401401
{(item) => (
402402
<GridListItem textValue={item.description || item.alt_description}>
403-
<img src={item.urls.regular} width={item.width} height={item.height} />
403+
<img src={item.urls.regular} width={item.width} height={item.height} alt="" />
404404
<Text>{item.description || item.alt_description}</Text>
405405
<Text slot="description">By {item.user.name}</Text>
406406
</GridListItem>
@@ -502,7 +502,7 @@ let images = [
502502
target="_blank"
503503
/*- end highlight -*/
504504
textValue={image.title}>
505-
<img src={image.image} width={image.width} height={image.height} />
505+
<img src={image.image} width={image.width} height={image.height} alt="" />
506506
<Text>{image.title}</Text>
507507
</GridListItem>
508508
)}
@@ -549,52 +549,52 @@ function Example(props) {
549549
///- end highlight -///
550550
>
551551
<GridListItem id={1} textValue="Desert Sunset">
552-
<img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
552+
<img src="https://images.unsplash.com/photo-1705034598432-1694e203cdf3?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} alt="" />
553553
<Text>Desert Sunset</Text>
554554
<Text slot="description">PNG • 2/3/2024</Text>
555555
</GridListItem>
556556
<GridListItem id={2} isDisabled textValue="Hiking Trail">
557-
<img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
557+
<img src="https://images.unsplash.com/photo-1722233987129-61dc344db8b6?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
558558
<Text>Hiking Trail</Text>
559559
<Text slot="description">JPEG • 1/10/2022</Text>
560560
</GridListItem>
561561
<GridListItem id={3} textValue="Lion">
562-
<img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} />
562+
<img src="https://images.unsplash.com/photo-1629812456605-4a044aa38fbc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={899} alt="" />
563563
<Text>Lion</Text>
564564
<Text slot="description">JPEG • 8/28/2021</Text>
565565
</GridListItem>
566566
<GridListItem id={4} textValue="Mountain Sunrise">
567-
<img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
567+
<img src="https://images.unsplash.com/photo-1722172118908-1a97c312ce8c?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
568568
<Text>Mountain Sunrise</Text>
569569
<Text slot="description">PNG • 3/15/2015</Text>
570570
</GridListItem>
571571
<GridListItem id={5} textValue="Giraffe tongue">
572-
<img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
572+
<img src="https://images.unsplash.com/photo-1574870111867-089730e5a72b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} alt="" />
573573
<Text>Giraffe tongue</Text>
574574
<Text slot="description">PNG • 11/27/2019</Text>
575575
</GridListItem>
576576
<GridListItem id={6} textValue="Golden Hour">
577-
<img src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} />
577+
<img src="https://images.unsplash.com/photo-1718378037953-ab21bf2cf771?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={402} alt="" />
578578
<Text>Golden Hour</Text>
579579
<Text slot="description">WEBP • 7/24/2024</Text>
580580
</GridListItem>
581581
<GridListItem id={7} textValue="Architecture">
582-
<img src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
582+
<img src="https://images.unsplash.com/photo-1721661657253-6621d52db753?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDYxfE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} alt="" />
583583
<Text>Architecture</Text>
584584
<Text slot="description">PNG • 12/24/2016</Text>
585585
</GridListItem>
586586
<GridListItem id={8} textValue="Peeking leopard">
587-
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
587+
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} alt="" />
588588
<Text>Peeking leopard</Text>
589589
<Text slot="description">JPEG • 3/2/2016</Text>
590590
</GridListItem>
591591
<GridListItem id={9} textValue="Roofs">
592-
<img src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} />
592+
<img src="https://images.unsplash.com/photo-1721598359121-363311b3b263?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDc0fE04alZiTGJUUndzfHxlbnwwfHx8fHw%3D" width={600} height={900} alt="" />
593593
<Text>Roofs</Text>
594594
<Text slot="description">JPEG • 4/24/2025</Text>
595595
</GridListItem>
596596
<GridListItem id={10} textValue="Half Dome Deer">
597-
<img src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={990} />
597+
<img src="https://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={990} alt="" />
598598
<Text>Half Dome Deer</Text>
599599
<Text slot="description">DNG • 8/28/2018</Text>
600600
</GridListItem>
@@ -889,7 +889,7 @@ function Example() {
889889
>
890890
{image => (
891891
<GridListItem textValue={image.title}>
892-
<img src={image.image} width={image.width} height={image.height} />
892+
<img src={image.image} width={image.width} height={image.height} alt="" />
893893
<Text>{image.title}</Text>
894894
<Text slot="description">{image.user}</Text>
895895
</GridListItem>

‎packages/dev/s2-docs/pages/react-aria/ToggleButtonGroup.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@ function SegmentedControlItem(props: ToggleButtonProps) {
106106
<ToggleButtonGroup
107107
className="segmented-control button-base"
108108
data-variant="secondary"
109+
aria-label="Time period"
109110
defaultSelectedKeys={['day']}
110111
disallowEmptySelection>
111112
<SegmentedControlItem id="day">Day</SegmentedControlItem>

‎packages/dev/s2-docs/pages/react-aria/collections.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ function Example() {
115115
return (
116116
<div>
117117
{/*- begin highlight -*/}
118-
<ListBox items={animals}>
118+
<ListBox aria-label="Animals" items={animals}>
119119
{item => <ListBoxItem>{item.name}</ListBoxItem>}
120120
</ListBox>
121121
{/*- end highlight -*/}
@@ -254,7 +254,7 @@ let people = [
254254
{id: 6, name: 'Jane'}
255255
];
256256

257-
<ListBox>
257+
<ListBox aria-label="Grouped items">
258258
<ListBoxSection>
259259
<Header>Animals</Header>
260260
{/*- begin highlight -*/}

0 commit comments

Comments
 (0)