Merge branch 'main' into dependabot/npm_and_yarn/types/react-18.2.21

primer · Sep 5, 2023 · 313394d · 313394d
2 parents 1081892 + 121288d
commit 313394d
Show file tree

Hide file tree

Showing 23 changed files with 228 additions and 120 deletions.
diff --git a/.changeset/angry-beds-itch.md b/.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 -->
diff --git a/.changeset/lazy-bees-train.md b/.changeset/lazy-bees-train.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Octicons: Upgrade react-octicons to v19.7.0
+
+<!-- Changed components: _none_ -->
diff --git a/.changeset/long-walls-sparkle.md b/.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_ -->
diff --git a/.github/workflows/add_to_inbox.yml b/.github/workflows/add_to_inbox.yml
@@ -9,32 +9,31 @@ jobs:
     if: ${{ github.repository == 'primer/react' && (github.event.action == 'opened' || github.event.action == 'reopened') }}
     runs-on: ubuntu-latest
     env:
-      ISSUE_ID: ${{ github.event.issue.node_id }}
-      REACT_LABEL_ID: 'LA_kwDOB0K8ws7Oq_eD'
-      PROJECT_ID: 'PN_kwDNJr_NNKA'
+      ISSUE_URL: ${{ github.event.issue.html_url }}
+      PROJECT_ID: 4503
     steps:
-      - id: get-access-token
+      - id: get-primer-access-token
         uses: camertron/github-app-installation-auth-action@v1
         with:
-          app-id: ${{ vars.PRIMER_APP_ID_SHARED }}
-          private-key: ${{ secrets.PRIMER_APP_PRIVATE_KEY_SHARED }}
-          client-id: ${{ vars.PRIMER_APP_CLIENT_ID_SHARED }}
-          client-secret: ${{ secrets.PRIMER_APP_CLIENT_SECRET_SHARED }}
-          installation-id: ${{ vars.PRIMER_APP_INSTALLATION_ID_SHARED }}
+          app-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_ID }}
+          private-key: ${{ secrets.PRIMER_ISSUE_TRIAGE_APP_PRIVATE_KEY }}
+          client-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_CLIENT_ID }}
+          client-secret: ${{ secrets.PRIMER_ISSUE_TRIAGE_APP_CLIENT_SECRET }}
+          installation-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_INSTALLATION_ID }}
       - name: Add react label to issue
         run: |
-          gh issue edit $ISSUE_ID --add-label react
+          gh issue edit $ISSUE_URL --add-label react
         env:
-          GH_TOKEN: ${{ steps.get-access-token.outputs.access-token }}
+          GH_TOKEN: ${{ steps.get-primer-access-token.outputs.access-token }}
+      - id: get-github-access-token
+        uses: camertron/github-app-installation-auth-action@v1
+        with:
+          app-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_ID_FOR_GITHUB }}
+          private-key: ${{ secrets.PRIMER_ISSUE_TRIAGE_APP_PRIVATE_KEY_FOR_GITHUB }}
+          client-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_CLIENT_ID_FOR_GITHUB }}
+          client-secret: ${{ secrets.PRIMER_ISSUE_TRIAGE_APP_CLIENT_SECRET_FOR_GITHUB }}
+          installation-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_INSTALLATION_ID_FOR_GITHUB }}
       - name: Add issue to project
-        run: |
-          gh api graphql --header 'GraphQL-Features: projects_next_graphql' -f query='
-            mutation($project:ID!,$issue:ID!) {
-              addProjectV2ItemById(input: {projectId: $project, contentId: $issue}) {
-                item {
-                  id
-                }
-              }
-            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID
+        run: gh project item-add $PROJECT_ID --url $ISSUE_URL --owner github
         env:
-          GH_TOKEN: ${{ steps.get-access-token.outputs.access-token }}
+          GH_TOKEN: ${{ steps.get-github-access-token.outputs.access-token }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -7,34 +7,28 @@ on:
       - next-major
 
 jobs:
-  get-access-token:
-    runs-on: ubuntu-latest
-    steps:
-      - id: get-access-token
-        uses: camertron/github-app-installation-auth-action@v1
-        with:
-          app-id: ${{ vars.PRIMER_APP_ID_SHARED }}
-          private-key: ${{ secrets.PRIMER_APP_PRIVATE_KEY_SHARED }}
-          client-id: ${{ vars.PRIMER_APP_CLIENT_ID_SHARED }}
-          client-secret: ${{ secrets.PRIMER_APP_CLIENT_SECRET_SHARED }}
-          installation-id: ${{ vars.PRIMER_APP_INSTALLATION_ID_SHARED }}
-
   release-main:
     if: github.ref_name == 'main'
     name: Main
-    needs: get-access-token
-    uses: primer/.github/.github/workflows/release.yml@main
+    uses: primer/.github/.github/workflows/release_with_app.yml@main
     secrets:
-      gh_token: ${{ needs.get-access-token.steps.get-access-token.outputs.access-token }}
       npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+      app-id: ${{ vars.PRIMER_APP_ID_SHARED }}
+      private-key: ${{ secrets.PRIMER_APP_PRIVATE_KEY_SHARED }}
+      client-id: ${{ vars.PRIMER_APP_CLIENT_ID_SHARED }}
+      client-secret: ${{ secrets.PRIMER_APP_CLIENT_SECRET_SHARED }}
+      installation-id: ${{ vars.PRIMER_APP_INSTALLATION_ID_SHARED }}
 
   release-next-major:
     if: github.ref_name == 'next-major'
     name: Next major
-    needs: get-access-token
-    uses: primer/.github/.github/workflows/release.yml@main
+    uses: primer/.github/.github/workflows/release_with_app.yml@main
     with:
       title: Release tracking (next major)
     secrets:
-      gh_token: ${{ needs.get-access-token.steps.get-access-token.outputs.access-token }}
       npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+      app-id: ${{ vars.PRIMER_APP_ID_SHARED }}
+      private-key: ${{ secrets.PRIMER_APP_PRIVATE_KEY_SHARED }}
+      client-id: ${{ vars.PRIMER_APP_CLIENT_ID_SHARED }}
+      client-secret: ${{ secrets.PRIMER_APP_CLIENT_SECRET_SHARED }}
+      installation-id: ${{ vars.PRIMER_APP_INSTALLATION_ID_SHARED }}
diff --git a/.github/workflows/update-snapshots.yml b/.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 }}

diff --git a/.gitignore b/.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
diff --git a/blob-report/report-1.zip b/blob-report/report-1.zip
diff --git a/blob-report/report-2.zip b/blob-report/report-2.zip
diff --git a/blob-report/report-3.zip b/blob-report/report-3.zip
diff --git a/blob-report/report-4.zip b/blob-report/report-4.zip
diff --git a/docs/content/PageLayout.mdx b/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,