Revert PRs that are breaking dotcom to get the current release out (#…

…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 <radglob@users.noreply.github.com>

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* 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 <radglob@users.noreply.github.com>

* 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 <radglob@users.noreply.github.com>

* 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 <radglob@users.noreply.github.com>

* 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 <radglob@users.noreply.github.com>

* Fix generated components.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>

* 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 <radglob@users.noreply.github.com>

* 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 <joshblack@users.noreply.github.com>

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

* use useIsomorphicLayoutEffect

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

---------

Co-authored-by: Josh Black <joshblack@github.com>

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

* npm install @primer/primitives@7.11.5

* 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 <simurai@users.noreply.github.com>

* Update RelativeTime stories (#3136)

* Update RelativeTime stories

* Update generated/components.json

---------

Co-authored-by: colebemis <colebemis@users.noreply.github.com>

* 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] <support@github.com>
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] <support@github.com>
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] <support@github.com>

* chore(eslint): remove unnecessary disable

---------

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

* 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] <support@github.com>

* test(snapshots): update snapshots

---------

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

* 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 <joshblack@users.noreply.github.com>

* 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] <support@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
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 <joshblack@users.noreply.github.com>

* 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 <joshblack@users.noreply.github.com>

* 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] <support@github.com>
Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>
Co-authored-by: Jeremy Neal <radglob@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josep Martins <josepmartins@github.com>

* 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 <colebemis@github.com>

* updates snapshots

---------

Co-authored-by: Cole Bemis <colebemis@github.com>

* 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 <siddharthkp@github.com>

* Update generated/components.json

---------

Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

* 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] <support@github.com>
Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Co-authored-by: jonrohan <jonrohan@users.noreply.github.com>
Co-authored-by: Jeremy Neal <radglob@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josep Martins <josepmartins@github.com>
Co-authored-by: Mike Perrotti <mperrotti@github.com>
Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

docs/content/ActionList.mdx

@@ -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 = () => {
@@ -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>
   )
 }
 

docs/content/ActionMenu.mdx

@@ -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.
@@ -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>
@@ -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) => (

docs/content/PageLayout.mdx

@@ -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>
@@ -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} />
@@ -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.
 
@@ -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