Skip to content

Commit

Permalink
Revert PRs that are breaking dotcom to get the current release out (#…
Browse files Browse the repository at this point in the history
…3408)

* Revert "Refactor(ActionList): ActionList.Item should render content as a button if parent is not interactive. (#3284)"

This reverts commit 08d7d5d.

* Revert "Address ToggleSwitch a11y feedback (#3251)"

This reverts commit 580f165.

* Revert "Revert "Refactor FilteredActionList to address a11y violations and use new ActionList. (#3247)" (#3349)"

This reverts commit a6b4169.

* Revert "fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler by @gr2m (#3346)"

This reverts commit 6304923.

* Revert "Refactor FilteredActionList to address a11y violations and use new ActionList. (#3247)"

This reverts commit e865e3e.

* Revert "fix(ActionList): update to read from group context if selectionVariant is defined (#3269)"

This reverts commit 21ec626.

* Revert "Add back check for GroupContext in ActionList.Selection to fix issues introduced to github/github (#3267)"

This reverts commit 332a1af.

* Revert "Fix create-slots utils path (#3223)"

This reverts commit f50997f.

* Revert "Allow up to 4 levels of nesting for the NavList (#3343)"

This reverts commit 786013e.

* Revert "NavList: Fix group dividers (#3328)"

This reverts commit 1fd6d32.

* Revert "StyledOcticon/Octicon: Update the render func to use `React.forwardRef()` (#3293)"

This reverts commit 027d214.

* Revert "Rename component StyledOcticon to Octicon (#3148)"

This reverts commit ac437bb.

* Revert "Update PRC ActionList implementation to have similar semantics to PVC. (#2878)"

This reverts commit 87883c3.

* Update generated/components.json

* Revert "Bump @primer/react-octicons to v19.0.1 (#3266)"

This reverts commit 9532977.

* Revert "Remove aria-hidden=true from spans with required asterisk (#3320)"

This reverts commit 47b7ea0.

* Rename component StyledOcticon to Octicon (#3148)

* Rename component StyledOcticon to Octicon

* Update generated/components.json

* Create .changeset/swift-cows-rest.md

* Fix snapshot

* Add segments to progressbar (#3114)

* Allow ProgressBar to either be given child segments or just a progress value.

* Update ProgressBar docs.

* Fix progress bar tests.

* Create dry-weeks-compete.md

* Fix errors from CI.

* Rename ProgressBar.Segment to ProgressBar.Item.

* Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar.

* Updated snapshots.

* Updated snapshots using --no-cache flag.

* refactor(CircleOcticon): Move files to folder, add storybook and e2e tests. (#3119)

* Reorganize CircleOcticon files, add story and e2e tests.

* Add index file.

* Update generated/components.json

* refactor(CircleBadge): move files into folder, add e2e tests. (#3118)

* Reorganize CircleBadge, add e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

* Update docs reference.

---------

Co-authored-by: radglob <[email protected]>

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <[email protected]>

* Refactor(Popover): move files into folder, add storybook and e2e tests. (#3135)

* Move files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <[email protected]>

* refactor(ButtonGroup): move files to folder. (#3117)

* Reorganize ButtonGroup component and stories.

* Update generated/components.json

* Add e2e tests.

* test(vrt): update snapshots

* refactor(CircleBadge): move files into folder, add e2e tests. (#3118)

* Reorganize CircleBadge, add e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

* Update docs reference.

---------

Co-authored-by: radglob <[email protected]>

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <[email protected]>

* Refactor(FilteredSearch): move files to folder, add storybook and e2e tests. (#3125)

* Move files to folder, add storybook and e2e tests.

* Add aria-label to TextInput, fix docs reference.

* Update generated/components.json

* test(vrt): update snapshots

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <[email protected]>

* Fix generated components.

---------

Co-authored-by: radglob <[email protected]>
Co-authored-by: Matthew Costabile <[email protected]>

* Refactor(LabelGroup): add files to folder, add storybook and e2e tests. (#3131)

* Move files to folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <[email protected]>

* test(e2e): update ActionMenu e2e test to remove custom contrast rules (#3130)

* test(e2e): update ActionMenu e2e test to remove custom contrast rules

* test(vrt): update snapshots

* test: remove multiple sections test

* test(e2e): restore rule exception for ActionMenu

---------

Co-authored-by: Josh Black <[email protected]>

* NavList SSR: use useIsomorphicLayoutEffect instead of useLayoutEffect (#3127)

* use useIsomorphicLayoutEffect

* Create .changeset/fast-panthers-refuse.md

---------

Co-authored-by: Josh Black <[email protected]>

* Bump @primer/primitives to `7.11.5` (#3120)

* npm install @primer/[email protected]

* Updating`theme-preval` snapshots

* Re-run

```
npm run build
npm run test -- -u
```

So that /themePreval.test.ts.snap also gets the new timestamp

* Update `theme-preval` snapshots docs

* Create .changeset/old-falcons-learn.md

* test(vrt): update snapshots

---------

Co-authored-by: simurai <[email protected]>

* Update RelativeTime stories (#3136)

* Update RelativeTime stories

* Update generated/components.json

---------

Co-authored-by: colebemis <[email protected]>

* chore(deps-dev): bump @types/jest-axe from 3.5.3 to 3.5.5 (#3141)

Bumps [@types/jest-axe](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest-axe) from 3.5.3 to 3.5.5.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest-axe)

---
updated-dependencies:
- dependency-name: "@types/jest-axe"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @rollup/plugin-typescript from 11.0.0 to 11.1.0 (#3138)

Bumps [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/HEAD/packages/typescript) from 11.0.0 to 11.1.0.
- [Release notes](https://github.com/rollup/plugins/releases)
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/typescript/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/commonjs-v11.1.0/packages/typescript)

---
updated-dependencies:
- dependency-name: "@rollup/plugin-typescript"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3 (#3140)

* chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3

Bumps [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) from 2.0.2 to 2.0.3.
- [Release notes](https://github.com/primer/eslint-plugin-primer-react/releases)
- [Changelog](https://github.com/primer/eslint-plugin-primer-react/blob/main/CHANGELOG.md)
- [Commits](primer/eslint-plugin-primer-react@v2.0.2...v2.0.3)

---
updated-dependencies:
- dependency-name: eslint-plugin-primer-react
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <[email protected]>

* chore(eslint): remove unnecessary disable

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <[email protected]>

* chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1 (#3139)

* chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1

Bumps [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) from 2.0.2 to 2.1.1.
- [Release notes](https://github.com/styled-components/babel-plugin-styled-components/releases)
- [Commits](styled-components/babel-plugin-styled-components@v2.0.2...v2.1.1)

---
updated-dependencies:
- dependency-name: babel-plugin-styled-components
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <[email protected]>

* test(snapshots): update snapshots

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <[email protected]>

* chore(project): update project to use Node.js v18 LTS (#3133)

* chore(project): update project to use Node.js v18 LTS

* chore: add legacy openssl option for docs builds

* chore: update devcontainer image

---------

Co-authored-by: Josh Black <[email protected]>

* Use SSR-compatible slot implementation in CheckboxGroup/RadioGroup (#3146)

* Update slots for checkbox group and radio group

* Update useSlot return type

* Update exports test

* Create .changeset/young-queens-notice.md

* Update comment indentation

* Add segments to progressbar (#3114)

* Allow ProgressBar to either be given child segments or just a progress value.

* Update ProgressBar docs.

* Fix progress bar tests.

* Create dry-weeks-compete.md

* Fix errors from CI.

* Rename ProgressBar.Segment to ProgressBar.Item.

* Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar.

* Updated snapshots.

* Updated snapshots using --no-cache flag.

* Update generated/components.json

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: radglob <[email protected]>
Co-authored-by: Matthew Costabile <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Siddharth Kshetrapal <[email protected]>
Co-authored-by: simurai <[email protected]>
Co-authored-by: simurai <[email protected]>
Co-authored-by: Cole Bemis <[email protected]>
Co-authored-by: colebemis <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* docs(project): move code of conduct under .github (#3145)

Co-authored-by: Josh Black <[email protected]>

* Add npm workspaces structure to primer/react (#3074)

* test(axe): default `color-contrast` check to false

* chore: update generate script to not conditionally disable contrast checks

* Create adr-015-npm-workspaces.md

* docs: update adr

* Update adr-015-npm-workspaces.md

---------

Co-authored-by: Josh Black <[email protected]>

* Update generated/components.json

* change styled_octicon key

* Update generated/components.json

* Update generated/components.json

* Update generated/components.json

* Octicon folder

* Fix package-lock

* Fix imports

* update path

* Update generated/components.json

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: jonrohan <[email protected]>
Co-authored-by: Jeremy Neal <[email protected]>
Co-authored-by: radglob <[email protected]>
Co-authored-by: Matthew Costabile <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Siddharth Kshetrapal <[email protected]>
Co-authored-by: simurai <[email protected]>
Co-authored-by: simurai <[email protected]>
Co-authored-by: Cole Bemis <[email protected]>
Co-authored-by: colebemis <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josep Martins <[email protected]>

* Allow up to 4 levels of nesting for the NavList (#3343)

* allows up to 4 levels of nesting for the NavList

* adds changeset

* Update src/NavList/NavList.tsx

Co-authored-by: Cole Bemis <[email protected]>

* updates snapshots

---------

Co-authored-by: Cole Bemis <[email protected]>

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler by @gr2m (#3346)

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler (#3163)

* test: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler

Failing test for #3162

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`ߴs `onSelect` handler

* add storybook example: Delayed Menu Close

* update docs

* docs: changeset

* Update changelog

---------

Co-authored-by: Siddharth Kshetrapal <[email protected]>

* Update generated/components.json

---------

Co-authored-by: Gregor Martynus <[email protected]>
Co-authored-by: siddharthkp <[email protected]>

* Revert "PageLayout.Content should not use main landmark by default. (#3154)"

This reverts commit fed1c57.

* Revert "Update `PageLayout` docs around `<main>` usage (#3323)"

This reverts commit e1904b2.

---------

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: broccolinisoup <[email protected]>
Co-authored-by: Jon Rohan <[email protected]>
Co-authored-by: jonrohan <[email protected]>
Co-authored-by: Jeremy Neal <[email protected]>
Co-authored-by: radglob <[email protected]>
Co-authored-by: Matthew Costabile <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Siddharth Kshetrapal <[email protected]>
Co-authored-by: simurai <[email protected]>
Co-authored-by: simurai <[email protected]>
Co-authored-by: Cole Bemis <[email protected]>
Co-authored-by: colebemis <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josep Martins <[email protected]>
Co-authored-by: Mike Perrotti <[email protected]>
Co-authored-by: Gregor Martynus <[email protected]>
Co-authored-by: siddharthkp <[email protected]>
  • Loading branch information
19 people committed Jun 16, 2023
1 parent d22cd80 commit 9d11a86
Show file tree
Hide file tree
Showing 102 changed files with 1,242 additions and 1,794 deletions.
5 changes: 0 additions & 5 deletions .changeset/eleven-humans-sneeze.md

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/empty-snakes-join.md

This file was deleted.

39 changes: 0 additions & 39 deletions .changeset/modern-coins-destroy.md

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/pink-beds-fetch.md

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/purple-crabs-matter.md

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/spicy-shoes-press.md

This file was deleted.

5 changes: 0 additions & 5 deletions .changeset/two-cycles-provide.md

This file was deleted.

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 8 additions & 9 deletions docs/content/ActionList.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
</ActionList>
```

### With headings
### With groups

```javascript live noinline
const SelectFields = () => {
Expand All @@ -196,30 +196,29 @@ const SelectFields = () => {
}

return (
<>
<ActionList selectionVariant="multiple">
<ActionList.Heading title="Visible fields" />
<ActionList selectionVariant="multiple">
<ActionList.Group title="Visible fields">
{visibleOptions.map(option => (
<ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
{option.text}
</ActionList.Item>
))}
</ActionList>
<ActionList
</ActionList.Group>
<ActionList.Group
title="Hidden fields"
selectionVariant={
/** selectionVariant override on Group: disable selection if there are no options */
hiddenOptions.length ? 'multiple' : false
}
>
<ActionList.Heading title="Hidden fields" />
{hiddenOptions.map((option, index) => (
<ActionList.Item key={option.text} selected={false} onSelect={() => toggle(option.text)}>
{option.text}
</ActionList.Item>
))}
{hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
</ActionList>
</>
</ActionList.Group>
</ActionList>
)
}

Expand Down
107 changes: 56 additions & 51 deletions docs/content/ActionMenu.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
componentId: action_menu
title: ActionMenu
status: Beta
a11yReviewed: false
a11yReviewed: true
source: https://github.com/primer/react/tree/main/src/ActionMenu.tsx
storybook: '/react/storybook?path=/story/components-actionmenu'
description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.
Expand Down Expand Up @@ -110,62 +110,65 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
</ActionMenu>
```

### Divided into sections
### With Groups

```jsx live
<ActionMenu>
<ActionMenu.Button>Open column menu</ActionMenu.Button>

<ActionMenu.Overlay>
<ActionList showDividers>
<ActionList.Heading title="Live query" />
<ActionList.Item>
<ActionList.LeadingVisual>
<SearchIcon />
</ActionList.LeadingVisual>
repo:github/memex,github/github
</ActionList.Item>
</ActionList>
<ActionList showDividers>
<ActionList.Heading title="Layout" variant="subtle" />
<ActionList.Item>
<ActionList.LeadingVisual>
<NoteIcon />
</ActionList.LeadingVisual>
Table
<ActionList.Description variant="block">
Information-dense table optimized for operations across teams
</ActionList.Description>
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<ProjectIcon />
</ActionList.LeadingVisual>
Board
<ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
</ActionList.Item>
</ActionList>
<ActionList showDividers>
<ActionList.Item>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to current view
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to new view
</ActionList.Item>
</ActionList>
<ActionList>
<ActionList.Item>
<ActionList.LeadingVisual>
<GearIcon />
</ActionList.LeadingVisual>
View settings
</ActionList.Item>
<ActionList.Group title="Live query">
<ActionList.Item>
<ActionList.LeadingVisual>
<SearchIcon />
</ActionList.LeadingVisual>
repo:github/memex,github/github
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group title="Layout" variant="subtle">
<ActionList.Item>
<ActionList.LeadingVisual>
<NoteIcon />
</ActionList.LeadingVisual>
Table
<ActionList.Description variant="block">
Information-dense table optimized for operations across teams
</ActionList.Description>
</ActionList.Item>
<ActionList.Item role="listitem">
<ActionList.LeadingVisual>
<ProjectIcon />
</ActionList.LeadingVisual>
Board
<ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group>
<ActionList.Item>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to current view
</ActionList.Item>
<ActionList.Item>
<ActionList.LeadingVisual>
<FilterIcon />
</ActionList.LeadingVisual>
Save sort and filters to new view
</ActionList.Item>
</ActionList.Group>
<ActionList.Divider />
<ActionList.Group>
<ActionList.Item>
<ActionList.LeadingVisual>
<GearIcon />
</ActionList.LeadingVisual>
View settings
</ActionList.Item>
</ActionList.Group>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
Expand All @@ -190,7 +193,9 @@ const Example = () => {

return (
<ActionMenu>
<ActionMenu.Button leadingIcon={selectedType.icon}>{selectedType.name}</ActionMenu.Button>
<ActionMenu.Button aria-label="Select field type" leadingIcon={selectedType.icon}>
{selectedType.name}
</ActionMenu.Button>
<ActionMenu.Overlay width="medium">
<ActionList selectionVariant="single">
{fieldTypes.map((type, index) => (
Expand Down
50 changes: 11 additions & 39 deletions docs/content/PageLayout.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -241,14 +241,14 @@ navigation container is used for.

### With `aria-label`

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.
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.

```jsx live
<PageLayout>
<PageLayout.Header aria-label="header">
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Content>
<PageLayout.Content aria-label="content">
<Placeholder label="Content" height={240} />
</PageLayout.Content>
<PageLayout.Pane>
Expand All @@ -262,15 +262,15 @@ Using `aria-label` along with `PageLayout.Header` or `PageLayout.Footer` creates

### With `aria-labelledby`

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.
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.

```jsx live
<PageLayout>
<PageLayout.Header aria-labelledby="header-label">
<Placeholder id="header-label" label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Content>
<Placeholder label="Content" height={240} />
<PageLayout.Content aria-labelledby="main-label">
<Placeholder id="main-label" label="Content" height={240} />
</PageLayout.Content>
<PageLayout.Pane>
<Placeholder label="Pane" height={120} />
Expand Down Expand Up @@ -300,35 +300,15 @@ Using `aria-labelledby` along with `PageLayout.Header` or `PageLayout.Footer` cr
</PageLayout>
```

### With `<main>` landmark

```jsx live
<PageLayout>
<PageLayout.Header>
<Placeholder label="Header" height={64} />
</PageLayout.Header>
<PageLayout.Content>
<main>
<Placeholder label="Content" height={240} />
</main>
</PageLayout.Content>
<PageLayout.Pane resizable>
<Placeholder label="Pane" height={120} />
</PageLayout.Pane>
<PageLayout.Footer>
<Placeholder label="Footer" height={64} />
</PageLayout.Footer>
</PageLayout>
```

## Accessibility

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.
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.

| Component | Landmark role |
| :------------------ | :------------------------------------------------------------------------------------------------------ |
| `PageLayout.Header` | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) |
| `PageLayout.Footer` | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) |
| Component | Landmark role |
| :------------------- | :------------------------------------------------------------------------------------------------------ |
| `PageLayout.Header` | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role) |
| `PageLayout.Content` | [`main`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role) |
| `PageLayout.Footer` | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) |

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.

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

### `PageLayout.Content`

The `PageLayout.Content` component does not provide a default `<main>` landmark role.
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).
When using `<main>` ensure that no other `<main>` landmark exists on the page, as there should only be one per page.

- [`main` usage](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html)

### `PageLayout.Pane`

The `PageLayout.Pane` component does not provide a default landmark role as the
Expand Down
Loading

0 comments on commit 9d11a86

Please sign in to comment.