Skip to content

Commit ed03efe

Browse files
broccolinisoupbroccolinisoup
committed
Revert "Update PageLayout docs around <main> usage (#3323)"
This reverts commit e1904b2.
1 parent 8c2732c commit ed03efe

File tree

3 files changed

+35
-39
lines changed

3 files changed

+35
-39
lines changed

‎docs/content/PageLayout.mdx‎

Lines changed: 11 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -241,14 +241,14 @@ navigation container is used for.
241241

242242
### With `aria-label`
243243

244-
Using `aria-label` along with `PageLayout.Header` or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
244+
Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
245245

246246
```jsx live
247247
<PageLayout>
248248
<PageLayout.Header aria-label="header">
249249
<Placeholder label="Header" height={64} />
250250
</PageLayout.Header>
251-
<PageLayout.Content>
251+
<PageLayout.Content aria-label="content">
252252
<Placeholder label="Content" height={240} />
253253
</PageLayout.Content>
254254
<PageLayout.Pane>
@@ -262,15 +262,15 @@ Using `aria-label` along with `PageLayout.Header` or `PageLayout.Footer` creates
262262

263263
### With `aria-labelledby`
264264

265-
Using `aria-labelledby` along with `PageLayout.Header` or `PageLayout.Footer` creates a unique label for each landmark role by using the given `id` to associate the landmark with the content with the corresponding `id`. This is helpful when you have a visible item that visually communicates the type of content which you would like to associate to the landmark itself.
265+
Using `aria-labelledby` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for each landmark role by using the given `id` to associate the landmark with the content with the corresponding `id`. This is helpful when you have a visible item that visually communicates the type of content which you would like to associate to the landmark itself.
266266

267267
```jsx live
268268
<PageLayout>
269269
<PageLayout.Header aria-labelledby="header-label">
270270
<Placeholder id="header-label" label="Header" height={64} />
271271
</PageLayout.Header>
272-
<PageLayout.Content>
273-
<Placeholder label="Content" height={240} />
272+
<PageLayout.Content aria-labelledby="main-label">
273+
<Placeholder id="main-label" label="Content" height={240} />
274274
</PageLayout.Content>
275275
<PageLayout.Pane>
276276
<Placeholder label="Pane" height={120} />
@@ -300,35 +300,15 @@ Using `aria-labelledby` along with `PageLayout.Header` or `PageLayout.Footer` cr
300300
</PageLayout>
301301
```
302302

303-
### With `<main>` landmark
304-
305-
```jsx live
306-
<PageLayout>
307-
<PageLayout.Header>
308-
<Placeholder label="Header" height={64} />
309-
</PageLayout.Header>
310-
<PageLayout.Content>
311-
<main>
312-
<Placeholder label="Content" height={240} />
313-
</main>
314-
</PageLayout.Content>
315-
<PageLayout.Pane resizable>
316-
<Placeholder label="Pane" height={120} />
317-
</PageLayout.Pane>
318-
<PageLayout.Footer>
319-
<Placeholder label="Footer" height={64} />
320-
</PageLayout.Footer>
321-
</PageLayout>
322-
```
323-
324303
## Accessibility
325304

326-
The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header` and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page.
305+
The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header`, `PageLayout.Content`, and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page.
327306

328-
| Component | Landmark role |
329-
| :------------------ | :------------------------------------------------------------------------------------------------------ |
330-
| `PageLayout.Header` | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) |
331-
| `PageLayout.Footer` | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) |
307+
| Component | Landmark role |
308+
| :------------------- | :------------------------------------------------------------------------------------------------------ |
309+
| `PageLayout.Header` | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) |
310+
| `PageLayout.Content` | [`main`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) |
311+
| `PageLayout.Footer` | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) |
332312

333313
Each component may be labeled through either `aria-label` or `aria-labelledby` in order to provide a unique label for the landmark. This can be helpful when there are multiple landmarks of the same type on the page.
334314

@@ -338,14 +318,6 @@ Each component may be labeled through either `aria-label` or `aria-labelledby` i
338318
- [WCAG, ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
339319
- [MDN, Landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role)
340320

341-
### `PageLayout.Content`
342-
343-
The `PageLayout.Content` component does not provide a default `<main>` landmark role.
344-
If you want to utilize a `<main>` landmark with this component, you may supply one directly [as a child of `PageLayout.Content`](#with-main-landmark).
345-
When using `<main>` ensure that no other `<main>` landmark exists on the page, as there should only be one per page.
346-
347-
- [`main` usage](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html)
348-
349321
### `PageLayout.Pane`
350322

351323
The `PageLayout.Pane` component does not provide a default landmark role as the

‎generated/components.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2744,6 +2744,18 @@
27442744
{
27452745
"name": "PageLayout.Content",
27462746
"props": [
2747+
{
2748+
"name": "aria-label",
2749+
"type": "string | undefined",
2750+
"defaultValue": "",
2751+
"description": "A unique label for the rendered main landmark"
2752+
},
2753+
{
2754+
"name": "aria-labelledby",
2755+
"type": "string | undefined",
2756+
"defaultValue": "",
2757+
"description": "An id to an element which uniquely labels the rendered main landmark"
2758+
},
27472759
{
27482760
"name": "width",
27492761
"type": "| 'full' | 'medium' | 'large' | 'xlarge'",

‎src/PageLayout/PageLayout.docs.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,18 @@
8484
{
8585
"name": "PageLayout.Content",
8686
"props": [
87+
{
88+
"name": "aria-label",
89+
"type": "string | undefined",
90+
"defaultValue": "",
91+
"description": "A unique label for the rendered main landmark"
92+
},
93+
{
94+
"name": "aria-labelledby",
95+
"type": "string | undefined",
96+
"defaultValue": "",
97+
"description": "An id to an element which uniquely labels the rendered main landmark"
98+
},
8799
{
88100
"name": "width",
89101
"type": "| 'full' | 'medium' | 'large' | 'xlarge'",

0 commit comments

Comments
 (0)