Update next-major with changes from main (#3354)

* ci(release-schedule): update format for previous issue id

* ci(release-schedule): use tagged template literals for assignees row

* docs: update to storybook v7 (#3298)

* docs: update to storybook v7

* ci: update storybook build command

* docs: fix typescript errors in stories

* chore: update build-storybook custom script

* test(e2e): update root selector for e2e tests

* chore: add storybook/csf dependency

* test: update lockfile test

---------

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

* Jdrush89/tree focus bug (#3300)

* Adding example of focus bug

* Not using focusInStrategy when clicking

* Clearing mousedown state correctly

* Adding changeset

* Removing unused import

* Moving mouseup handler

* feat(npm): add experimental entrypoint (#3295)

* feat(npm): add experimental entrypoint

* chore: add changeset

---------

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

* ci: release notification (#3318)

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

* SelectPanel: Add filter input label and description (#3312)

* Make placeholderText prop optional

* Add `inputLabel` prop

* Add filter input description

* Create early-beds-whisper.md

* Document inputLabel prop

* Update src/SelectPanel/SelectPanel.docs.json

* Update generated/components.json

---------

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

* SelectPanel: Add `title` prop (#3311)

* Add a title prop to SelectPanel

* Update generated/components.json

* Create small-queens-vanish.md

* Allow title to be ReactElement

* Update SelectPanel stories

* Update generated/components.json

* Update snapshots

---------

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

* SelectPanel: Announce changes to screen readers (#3316)

* SelectPanel: Announce filter changes to screenreaders

* Create rare-humans-watch.md

* Update formatting

* chore(dependencies): update @typescript-eslint/* (#3307)

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

* Remove chroma-js dependency (#3325)

* remove chroma.valid to drop chroma-js dependency

* Create rotten-dogs-hang.md

* Update accessibility-alt-text-bot.yml (#3326)

* Update accessibility-alt-text-bot.yml

### What

The accessibility-alt-text-bot workflow does not have permissions to write a comment on an issue. This is likely due to how permissions are setup in this repo. In order to keep permissions, at the repo level, unchanged, we need to add permission directly to the workflow. 

I also took this as an opportunity to bump the alt-text-bot version and give you access to reminders in discussions

* format

* add  contents

* add  contents

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

* Remove aria-hidden=true from spans with required asterisk

* Create pink-beds-fetch.md

---------

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

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

* Update `PageLayout` docs around `<main>` usage

* Update generated/components.json

* Fix links

---------

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

* ci:  update ci workflow to run against next-major branch (#3329)

* NavList: Fix group dividers (#3328)

* Fix NavLIst.Group dividers

* Use first-of-type instead of first-child

* Update snapshots and stories

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

* Update FilteredActionList to use non-deprecated ActionList.

* Use non-deprecated ActionList in FilteredActionList.

* Fix a11y issues in FilteredActionList story.

* Add prop to hide selection component if needed.

* Remove unused hook import.

* Get SavedReplies to look as it did with deprecated ActionList.

* Fix failing test.

* Create weak-jokes-chew.md

* Update generated/components.json

* Fix themePreval snapshot.

* Linting fixes.

* Fix type-check errors.

* Update themePreval snapshot again.

* Fix themePreval snapshot to match origin. Unsure why it's not generating the same way.

* Hide selections in MarkdownEditor saved replies.

* Remove hideSelection prop and add defaultRenderFn to FilteredActionList so these don't have to be defined manually everywhere.

* Fix selection rendering (needed explicit selected boolean) and fix SelectPanel docs.

* Pass selectionVariant illegally to SelectPanel in src/MarkdownEditor/_SavedReplies.tsx so Selection components don't render.

* Remove remaining references of hideSelection prop.

* Update changeset to reflect that changes impact SelectPanel.

* Remove renderFn prop from SelectPanel and use default for FilteredActionList, which seems to cover most cases.

* Fix truncation in SavedReplies descriptions.

* Update generated/components.json

* Fix linting error.

* Don't make renderFn a prop (if we need to make this configurable, we can expose it later. Use maxWidth 100% for SavedReplies truncation.

* Use showDividers prop in SelectPanel story.

* Formatting.

* Add temporary support for showItemDividers prop to SelectPanel to keep backwards compatibility.

* Support passing deprecated showItemDividers prop in ActionList.

---------

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

* Add PostCSS color var fallback for upcoming CSS work (#3278)

* add fallback plugin

* Update rollup.config.js

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

* remove fallbacks from source

* add back conflict free package-lock

* use lockfileVersion 3

---------

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

* Move theme dependencies on lodash from devDependencies to dependencies (#3332)

* move theme deps from devDependencies

* Create eleven-sloths-laugh.md

* chore(deps-dev): bump terser from 5.16.1 to 5.17.6 (#3336)

Bumps [terser](https://github.com/terser/terser) from 5.16.1 to 5.17.6.
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](terser/terser@v5.16.1...v5.17.6)

---
updated-dependencies:
- dependency-name: terser
  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 micromark-extension-mdxjs from 1.0.0 to 1.0.1 (#3337)

Bumps [micromark-extension-mdxjs](https://github.com/micromark/micromark-extension-mdxjs) from 1.0.0 to 1.0.1.
- [Release notes](https://github.com/micromark/micromark-extension-mdxjs/releases)
- [Commits](micromark/micromark-extension-mdxjs@1.0.0...1.0.1)

---
updated-dependencies:
- dependency-name: micromark-extension-mdxjs
  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 @storybook/addon-essentials from 7.0.12 to 7.0.18 (#3338)

Bumps [@storybook/addon-essentials](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/essentials) from 7.0.12 to 7.0.18.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/v7.0.18/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v7.0.18/code/addons/essentials)

---
updated-dependencies:
- dependency-name: "@storybook/addon-essentials"
  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>

* ci(vrt): update build storybook step (#3333)

* chore(deps-dev): bump prettier from 2.8.1 to 2.8.8 (#3335)

* chore(deps-dev): bump prettier from 2.8.1 to 2.8.8

Bumps [prettier](https://github.com/prettier/prettier) from 2.8.1 to 2.8.8.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](prettier/prettier@2.8.1...2.8.8)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: run prettier

---------

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>
Co-authored-by: Josh Black <joshblack@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>

* Loosen `@primitives` dependency (#3350)

* add caret

* Create fluffy-pants-play.md

* Bump alt-text-bot: get alt text reminders on discussion comments (#3351)

* Changes alignment of form control validation message icon (#3121)

* changes alignment of validation message icon

* Create .changeset/big-days-obey.md

* updates snapshots

* updates snapshots again

* refactors layout styles

* test(vrt): update snapshots

---------

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

* Update release-schedule.yml (#3342)

* Update release-schedule.yml (#3345)

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Joshua Rush <jdrush89@gmail.com>
Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: Kendall Gassner <kendallgassner@github.com>
Co-authored-by: Adriana Babakanian <adrianababakanian@github.com>
Co-authored-by: Tyler Jones <tylerjdev@github.com>
Co-authored-by: TylerJDev <TylerJDev@users.noreply.github.com>
Co-authored-by: Jeremy Neal <radglob@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
Co-authored-by: Mike Perrotti <mperrotti@github.com>

.changeset/big-days-obey.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Changes the alignment of the validation message icon to be vertically center-aligned with the first line of text.

.changeset/brave-cherries-march.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+ActionMenu: Calling `event.preventDefault` inside `onSelect` of `ActionList.Item` will prevent the default behavior of closing the menu

.changeset/early-beds-whisper.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Add filter input label and description

.changeset/eleven-sloths-laugh.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move  `lodash.isempty` and `lodash.isobject` from `devDependencies` to `dependencies`

.changeset/fluffy-pants-play.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Loosen `@primitives` dependency

.changeset/khaki-walls-applaud.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixing toggle bug on Treeview when it initially receives focus

.changeset/pink-beds-fetch.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Remove `aria-hidden=true` from `span`s with required asterisk

.changeset/rare-humans-watch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Announce changes to screen readers

.changeset/rotten-dogs-hang.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove chroma-js dependency. Companion to #3243

.changeset/small-queens-vanish.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+SelectPanel: Add `title` prop

.changeset/tiny-melons-march.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add @primer/react/experimental entrypoint as an alternative to drafts

.changeset/weak-jokes-chew.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+FilteredActionList now uses new ActionList as a base, and SelectPanel reflects those changes.

.github/workflows/accessibility-alt-text-bot.yml

@@ -6,12 +6,19 @@ on:
     types: [opened, edited]
   issue_comment:
     types: [created, edited]
+  discussion:
+    types: [created, edited]
+
+permissions:
+  issues: write
+  pull-requests: write
+  discussions: write
 
 jobs:
   accessibility_alt_text_bot:
     name: Check alt text is set on issue or pull requests
     runs-on: ubuntu-latest
-    if: ${{ github.event.issue || github.event.pull_request }}
+    if: ${{ github.event.issue || github.event.pull_request || github.event.discussion  }}
     steps:
       - name: Get action 'github/accessibility-alt-text-bot'
-        uses: github/accessibility-alt-text-bot@v1.0.0
+        uses: github/accessibility-alt-text-bot@v1.2.0

.github/workflows/ci.yml

@@ -3,10 +3,12 @@ on:
   push:
     branches:
       - main
+      - next-major
   pull_request:
   merge_group:
     branches:
       - main
+      - next-major
     types:
       - checks_requested
 
@@ -158,7 +160,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx build-storybook
+        run: npx storybook build
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook
@@ -204,7 +206,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx build-storybook
+        run: npx storybook build
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook

.github/workflows/release-notification.yml

@@ -0,0 +1,15 @@
+name: Release notification
+on:
+  release:
+    types:
+      - published
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: gr2m/release-notifier-action@v1
+        with:
+          app_id: ${{ secrets.RELEASE_NOTIFIER_APP_ID }}
+          private_key: ${{ secrets.RELEASE_NOTIFIER_APP_PRIVATE_KEY }}
+          dispatch_event_type: 'release:primer/react'

.github/workflows/release-schedule.yml

@@ -1,6 +1,8 @@
 name: Release Schedule
 on:
   workflow_dispatch:
+  schedule:
+    - cron: '30 13 * * MON'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
@@ -86,7 +88,7 @@ jobs:
 
             // Issue IDs
             const id = `primer-release-schedule:${format(start, 'yyyy-MM-dd')}`;
-            const previousId = `primer-release-schedule:${format(previousStart, 'yyyy-M-dd')}`;
+            const previousId = `primer-release-schedule:${format(previousStart, 'yyyy-MM-dd')}`;
 
             core.startGroup(`Previous schedule: ${previousId}`);
             core.info(`Start: ${previousStart}`);
@@ -105,7 +107,7 @@ jobs:
               '<!-- Provide updates for release activities, like cutting releases and different integration points -->',
               '',
               ...eachDayOfInterval({ start, end }).map((day) => {
-                return `- ${format(day, 'EEEE do')}`;
+                return `- ${format(day, 'EEEE, LLLL do')}`;
               }),
               '',
             ].join('\n');
@@ -191,7 +193,7 @@ jobs:
               ISSUE_BODY += '| Last week | Value |\n';
               ISSUE_BODY += '| :-------- | :---- |\n';
               ISSUE_BODY += `| Issue     | [${releaseIssue.title}](${releaseIssue.html_url}) |\n`;
-              ISSUE_BODY += '| Conductor | ${assignees} |\n';
+              ISSUE_BODY += `| Conductor | ${assignees} |\n`;
               ISSUE_BODY += '| Release Pull Request | [Link](https://gh.io/AAksvvr) |\n';
               ISSUE_BODY += '| Integration tests    | [Link](https://gh.io/AAkr65h) |\n';
               ISSUE_BODY += '\n';

.github/workflows/vrt.yml

@@ -42,7 +42,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx build-storybook
+        run: npx storybook build
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook

.storybook/main.js

@@ -4,7 +4,12 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    {name: '@storybook/addon-essentials', options: {backgrounds: false}},
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
     '@storybook/addon-storysource',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
@@ -16,26 +21,33 @@ module.exports = {
       },
     },
     {
-      name: 'storybook-css-modules', // TODO: replace with @storybook/addon-styling for storybook v7
-      options: {cssModulesLoaderOptions: {modules: {localIdentName: 'prc_[local]-[hash:base64:5]'}}},
-    },
-  ],
-  core: {
-    builder: {
-      name: 'webpack5',
+      name: 'storybook-css-modules',
+      // TODO: replace with @storybook/addon-styling for storybook v7
       options: {
-        fsCache: true,
+        cssModulesLoaderOptions: {
+          modules: {
+            localIdentName: 'prc_[local]-[hash:base64:5]',
+          },
+        },
       },
     },
-  },
+  ],
   features: {
     interactionsDebugger: true,
     storyStoreV7: true,
     buildStoriesJson: true,
   },
-  framework: '@storybook/react',
-  reactOptions: {
-    fastRefresh: true,
-    strictMode: true,
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      fastRefresh: true,
+      strictMode: true,
+      builder: {
+        fsCache: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: true,
   },
 }

.storybook/preview.js

@@ -23,12 +23,6 @@ Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => {
   }
 })
 
-addons.setConfig({
-  // Some stories may set up keyboard event handlers, which can be interfered
-  // with by these keyboard shortcuts.
-  enableShortcuts: false,
-})
-
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   html: {

contributor-docs/adrs/adr-010-behavior-isolation.md

@@ -84,7 +84,7 @@ Primer React's [recent addition of the Relative Time component](https://github.c
 
 ```typescript
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
-const HTMLElement = root.HTMLElement || (null as unknown as typeof window['HTMLElement'])
+const HTMLElement = root.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
 ```
 
 These lines could also be added to the global context, to avoid adding it to each element.

docs/content/PageLayout.mdx

@@ -241,14 +241,14 @@ navigation container is used for.
 
 ### With `aria-label`
 
-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.
+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.
 
 ```jsx live
 <PageLayout>
   <PageLayout.Header aria-label="header">
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Content aria-label="content">
+  <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
   <PageLayout.Pane>
@@ -262,15 +262,15 @@ Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `Pag
 
 ### With `aria-labelledby`
 
-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.
+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.
 
 ```jsx live
 <PageLayout>
   <PageLayout.Header aria-labelledby="header-label">
     <Placeholder id="header-label" label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Content aria-labelledby="main-label">
-    <Placeholder id="main-label" label="Content" height={240} />
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
   </PageLayout.Content>
   <PageLayout.Pane>
     <Placeholder label="Pane" height={120} />
@@ -300,15 +300,35 @@ Using `aria-labelledby` along with `PageLayout.Header`, `PageLayout.Content`, or
 </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`, `PageLayout.Content`, 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` 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.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) |
+| 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) |
 
 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.
 
@@ -318,6 +338,14 @@ 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

docs/content/SelectPanel.mdx

@@ -12,20 +12,18 @@ A `SelectPanel` provides an anchor that will open an overlay with a list of sele
 
 ```javascript live noinline
 function getColorCircle(color) {
-  return function () {
-    return (
-      <Box
-        borderWidth="1px"
-        borderStyle="solid"
-        bg={color}
-        borderColor={color}
-        width={14}
-        height={14}
-        borderRadius={10}
-        margin="auto"
-      />
-    )
-  }
+  return (
+    <Box
+      borderWidth="1px"
+      borderStyle="solid"
+      bg={color}
+      borderColor={color}
+      width={14}
+      height={14}
+      borderRadius={10}
+      margin="auto"
+    />
+  )
 }
 
 const items = [