Merge branch 'main' of github.com:primer/react into next-major

.changeset/angry-beds-itch.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+PageLayout.Content no longer renders as `main` by default. Instead, developers may add a `main` landmark within `Pagelayout.Content` themselves.
+
+<!-- Changed components: PageLayout -->

.changeset/long-walls-sparkle.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Fix dialog bug where escape would move focus when dialog was closed
+
+<!-- Changed components: _none_ -->

.github/workflows/update-snapshots.yml

@@ -62,7 +62,7 @@ jobs:
     steps:
       - name: Generate token
         id: generate_token
-        uses: tibdex/github-app-token@v1
+        uses: actions/create-github-app-token@v1
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.PRIVATE_KEY }}

.gitignore

@@ -1,16 +1,37 @@
-.test
-node_modules
-.DS_Store
-.idea
-coverage/
+# Build folders
 dist/
 lib/
 !codemods/lib/
 lib-esm/
 css/
-public/
-stats.html
+/generated
+
+# Editor
+.DS_Store
+*.swp
+.idea
+.vscode
+.tool-versions
+
+# Environment
 .env
+
+# Dependencies
+node_modules
+
+# Gatsby
+public/
+
+# Storybook
 storybook-static
-.tool-versions
-/generated
+
+# Next.js
+.next
+
+# Jest
+.test
+coverage/
+
+# Playwright
+stats.html
+blob-report

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,7 +338,15 @@ 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.Pane`
+### `PageLayout.Content` as landmark
+
+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` landmark usage](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html)
+
+### `PageLayout.Pane` as landmark
 
 The `PageLayout.Pane` component does not provide a default landmark role as the
 content of this component may have different roles. When using this component,