Skip to content

Commit adbcd3b

Browse files
colebemiscolebemis
authored
PageLayout: Use HTML5 landmark elements (#1973)
* Use HTML5 landmark elements * Remove separator role because the dividers are only decorative * Create brown-maps-yawn.md * Update snapshot tests * Update component checklist
1 parent a377a51 commit adbcd3b

File tree

4 files changed

+42
-51
lines changed

4 files changed

+42
-51
lines changed

‎.changeset/brown-maps-yawn.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
The `PageLayout` component now renders [HTML5 landmark elements](https://web.dev/use-landmarks/) (`header`, `aside`, `footer`) to improve the navigation experience for people using assistive technologies (like screen readers)

‎docs/content/PageLayout.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -258,7 +258,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
258258
usageExamplesDocumented: true,
259259
hasStorybookStories: true,
260260
designReviewed: false,
261-
a11yReviewed: false,
261+
a11yReviewed: true,
262262
stableApi: false,
263263
addressedApiFeedback: false,
264264
hasDesignGuidelines: false,

‎src/PageLayout/PageLayout.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,6 @@ const HorizontalDivider: React.FC<DividerProps> = ({variant = 'none', variantWhe
114114
const {padding} = React.useContext(PageLayoutContext)
115115
return (
116116
<Box
117-
role="separator"
118117
// eslint-disable-next-line @typescript-eslint/no-explicit-any
119118
sx={(theme: any) =>
120119
merge<BetterSystemStyleObject>(
@@ -156,7 +155,6 @@ const verticalDividerVariants = {
156155
const VerticalDivider: React.FC<DividerProps> = ({variant = 'none', variantWhenNarrow = 'inherit', sx = {}}) => {
157156
return (
158157
<Box
159-
role="separator"
160158
// eslint-disable-next-line @typescript-eslint/no-explicit-any
161159
sx={(theme: any) =>
162160
merge<BetterSystemStyleObject>(
@@ -191,6 +189,7 @@ const Header: React.FC<PageLayoutHeaderProps> = ({
191189
const {rowGap} = React.useContext(PageLayoutContext)
192190
return (
193191
<Box
192+
as="header"
194193
sx={merge<BetterSystemStyleObject>(
195194
{
196195
order: REGION_ORDER.header,
@@ -230,6 +229,7 @@ const contentWidths = {
230229
const Content: React.FC<PageLayoutContentProps> = ({width = 'full', children, sx = {}}) => {
231230
return (
232231
<Box
232+
as="main"
233233
sx={merge<BetterSystemStyleObject>(
234234
{
235235
order: REGION_ORDER.content,
@@ -286,6 +286,7 @@ const Pane: React.FC<PageLayoutPaneProps> = ({
286286
const computedDividerWhenNarrow = dividerWhenNarrow === 'inherit' ? divider : dividerWhenNarrow
287287
return (
288288
<Box
289+
as="aside"
289290
// eslint-disable-next-line @typescript-eslint/no-explicit-any
290291
sx={(theme: any) =>
291292
merge<BetterSystemStyleObject>(
@@ -344,6 +345,7 @@ const Footer: React.FC<PageLayoutFooterProps> = ({
344345
const {rowGap} = React.useContext(PageLayoutContext)
345346
return (
346347
<Box
348+
as="footer"
347349
sx={merge<BetterSystemStyleObject>(
348350
{
349351
order: REGION_ORDER.footer,

‎src/PageLayout/__snapshots__/PageLayout.test.tsx.snap

Lines changed: 32 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -154,50 +154,46 @@ exports[`PageLayout renders condensed layout 1`] = `
154154
<div
155155
class="c1"
156156
>
157-
<div
157+
<header
158158
class="c2"
159159
>
160160
Header
161161
<div
162162
class="c3"
163-
role="separator"
164163
/>
165-
</div>
166-
<div
164+
</header>
165+
<main
167166
class="c4"
168167
>
169168
<div
170169
class="c5"
171170
>
172171
Content
173172
</div>
174-
</div>
175-
<div
173+
</main>
174+
<aside
176175
class="c6"
177176
>
178177
<div
179178
class="c7"
180-
role="separator"
181179
/>
182180
<div
183181
class="c8"
184-
role="separator"
185182
/>
186183
<div
187184
class="c9"
188185
>
189186
Pane
190187
</div>
191-
</div>
192-
<div
188+
</aside>
189+
<footer
193190
class="c10"
194191
>
195192
<div
196193
class="c7"
197-
role="separator"
198194
/>
199195
Footer
200-
</div>
196+
</footer>
201197
</div>
202198
</div>
203199
</div>
@@ -403,50 +399,46 @@ exports[`PageLayout renders default layout 1`] = `
403399
<div
404400
class="c1"
405401
>
406-
<div
402+
<header
407403
class="c2"
408404
>
409405
Header
410406
<div
411407
class="c3"
412-
role="separator"
413408
/>
414-
</div>
415-
<div
409+
</header>
410+
<main
416411
class="c4"
417412
>
418413
<div
419414
class="c5"
420415
>
421416
Content
422417
</div>
423-
</div>
424-
<div
418+
</main>
419+
<aside
425420
class="c6"
426421
>
427422
<div
428423
class="c7"
429-
role="separator"
430424
/>
431425
<div
432426
class="c8"
433-
role="separator"
434427
/>
435428
<div
436429
class="c9"
437430
>
438431
Pane
439432
</div>
440-
</div>
441-
<div
433+
</aside>
434+
<footer
442435
class="c10"
443436
>
444437
<div
445438
class="c7"
446-
role="separator"
447439
/>
448440
Footer
449-
</div>
441+
</footer>
450442
</div>
451443
</div>
452444
</div>
@@ -652,50 +644,46 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
652644
<div
653645
class="c1"
654646
>
655-
<div
647+
<header
656648
class="c2"
657649
>
658650
Header
659651
<div
660652
class="c3"
661-
role="separator"
662653
/>
663-
</div>
664-
<div
654+
</header>
655+
<main
665656
class="c4"
666657
>
667658
<div
668659
class="c5"
669660
>
670661
Content
671662
</div>
672-
</div>
673-
<div
663+
</main>
664+
<aside
674665
class="c6"
675666
>
676667
<div
677668
class="c3"
678-
role="separator"
679669
/>
680670
<div
681671
class="c7"
682-
role="separator"
683672
/>
684673
<div
685674
class="c8"
686675
>
687676
Pane
688677
</div>
689-
</div>
690-
<div
678+
</aside>
679+
<footer
691680
class="c9"
692681
>
693682
<div
694683
class="c10"
695-
role="separator"
696684
/>
697685
Footer
698-
</div>
686+
</footer>
699687
</div>
700688
</div>
701689
</div>
@@ -936,50 +924,46 @@ exports[`PageLayout renders with dividers 1`] = `
936924
<div
937925
class="c1"
938926
>
939-
<div
927+
<header
940928
class="c2"
941929
>
942930
Header
943931
<div
944932
class="c3"
945-
role="separator"
946933
/>
947-
</div>
948-
<div
934+
</header>
935+
<main
949936
class="c4"
950937
>
951938
<div
952939
class="c5"
953940
>
954941
Content
955942
</div>
956-
</div>
957-
<div
943+
</main>
944+
<aside
958945
class="c6"
959946
>
960947
<div
961948
class="c7"
962-
role="separator"
963949
/>
964950
<div
965951
class="c8"
966-
role="separator"
967952
/>
968953
<div
969954
class="c9"
970955
>
971956
Pane
972957
</div>
973-
</div>
974-
<div
958+
</aside>
959+
<footer
975960
class="c10"
976961
>
977962
<div
978963
class="c11"
979-
role="separator"
980964
/>
981965
Footer
982-
</div>
966+
</footer>
983967
</div>
984968
</div>
985969
</div>

0 commit comments

Comments
 (0)