diff --git a/.changeset/angry-beds-itch.md b/.changeset/angry-beds-itch.md new file mode 100644 index 00000000000..851b988409d --- /dev/null +++ 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. + + diff --git a/.changeset/lazy-bees-train.md b/.changeset/lazy-bees-train.md new file mode 100644 index 00000000000..90324dcd2c2 --- /dev/null +++ b/.changeset/lazy-bees-train.md @@ -0,0 +1,7 @@ +--- +'@primer/react': minor +--- + +Octicons: Upgrade react-octicons to v19.7.0 + + diff --git a/.changeset/long-walls-sparkle.md b/.changeset/long-walls-sparkle.md new file mode 100644 index 00000000000..5d6f59339d9 --- /dev/null +++ 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 + + diff --git a/.github/workflows/add_to_inbox.yml b/.github/workflows/add_to_inbox.yml index a36c680bb4c..863d972ee24 100644 --- 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 index d8e711cccc6..42252318faa 100644 --- 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 index 62f35f0f08b..60df7e97118 100644 --- 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 index 4f683f44654..191c2d20a48 100644 --- 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 deleted file mode 100644 index 08389772006..00000000000 Binary files a/blob-report/report-1.zip and /dev/null differ diff --git a/blob-report/report-2.zip b/blob-report/report-2.zip deleted file mode 100644 index 43ca0f51b95..00000000000 Binary files a/blob-report/report-2.zip and /dev/null differ diff --git a/blob-report/report-3.zip b/blob-report/report-3.zip deleted file mode 100644 index 781929d19e8..00000000000 Binary files a/blob-report/report-3.zip and /dev/null differ diff --git a/blob-report/report-4.zip b/blob-report/report-4.zip deleted file mode 100644 index de5dc5e8bef..00000000000 Binary files a/blob-report/report-4.zip and /dev/null differ diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx index b3a7be5f539..d008253fb7f 100644 --- 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 - + @@ -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 - - + + @@ -300,15 +300,35 @@ Using `aria-labelledby` along with `PageLayout.Header`, `PageLayout.Content`, or ``` +### With `
` landmark + +```jsx live + + + + + +
+ +
+ + + + + + + + +``` + ## 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 `
` landmark role. +If you want to utilize a `
` landmark with this component, you may supply one directly [as a child of `PageLayout.Content`](#with-main-landmark). +When using `
` ensure that no other `
` 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, diff --git a/package-lock.json b/package-lock.json index b7885149b21..2fcbcaca83e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,9 +13,9 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@lit-labs/react": "^1.1.1", + "@lit-labs/react": "^2.0.1", "@primer/behaviors": "^1.3.4", - "@primer/octicons-react": "^19.3.0", + "@primer/octicons-react": "^19.7.0", "@primer/primitives": "^7.11.11", "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", @@ -171,7 +171,7 @@ "ts-toolbelt": "9.6.0", "typescript": "4.9.5", "typescript-plugin-css-modules": "5.0.1", - "unist-util-find": "1.0.2", + "unist-util-find": "3.0.0", "unist-util-find-before": "4.0.0", "unist-util-flat-filter": "2.0.0", "webpack": "5.88.2", @@ -5729,9 +5729,12 @@ "dev": true }, "node_modules/@lit-labs/react": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.1.1.tgz", - "integrity": "sha512-9TC+/ZWb6BJlWCyUr14FKFlaGnyKpeEDorufXozQgke/VoVrslUQNaL7nBmrAWdNrmzx5jWgi8lFmWwrxMjnlA==" + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz", + "integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==", + "peerDependencies": { + "@types/react": "17 || 18" + } }, "node_modules/@manypkg/find-root": { "version": "1.1.0", @@ -6035,9 +6038,9 @@ } }, "node_modules/@primer/octicons-react": { - "version": "19.3.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.3.0.tgz", - "integrity": "sha512-LCCer1Roc5WGYy5FZcByniuUOJKla7i+9TaPeL95G+KIXhisuyWbTIy5DbiW/EWYMWvfCUQe6u71zZKVNeHjyg==", + "version": "19.7.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-19.7.0.tgz", + "integrity": "sha512-KzB7P+Ew3ud/ua61tQFkTvdS2aIfKUMsT/uHUCvIzfHTcB49xD1MIoQLAwoshiEH4M+aLLGFNCLfBC/xTIH8vw==", "engines": { "node": ">=8" }, @@ -40032,13 +40035,18 @@ } }, "node_modules/unist-util-find": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/unist-util-find/-/unist-util-find-1.0.2.tgz", - "integrity": "sha512-ft06UDYzqi9o9RmGP0sZWI/zvLLQiBW2/MD+rW6mDqbOWDcmknGX9orQPspfuGRYWr8eSJAmfsBcvOpfGRJseA==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/unist-util-find/-/unist-util-find-3.0.0.tgz", + "integrity": "sha512-T7ZqS7immLjYyC4FCp2hDo3ksZ1v+qcbb+e5+iWxc2jONgHOLXPCpms1L8VV4hVxCXgWTxmBHDztuEZFVwC+Gg==", "dev": true, "dependencies": { - "lodash.iteratee": "^4.5.0", - "unist-util-visit": "^1.1.0" + "@types/unist": "^3.0.0", + "lodash.iteratee": "^4.0.0", + "unist-util-visit": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, "node_modules/unist-util-find-before": { @@ -40074,28 +40082,52 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/unist-util-find/node_modules/unist-util-is": { + "node_modules/unist-util-find/node_modules/@types/unist": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz", - "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.0.tgz", + "integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==", "dev": true }, + "node_modules/unist-util-find/node_modules/unist-util-is": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", + "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/unist-util-find/node_modules/unist-util-visit": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz", - "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz", + "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==", "dev": true, "dependencies": { - "unist-util-visit-parents": "^2.0.0" + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0", + "unist-util-visit-parents": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, "node_modules/unist-util-find/node_modules/unist-util-visit-parents": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz", - "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==", + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz", + "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==", "dev": true, "dependencies": { - "unist-util-is": "^3.0.0" + "@types/unist": "^3.0.0", + "unist-util-is": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, "node_modules/unist-util-flat-filter": { diff --git a/package.json b/package.json index 155c0e50ed5..176022a0fbc 100644 --- a/package.json +++ b/package.json @@ -98,9 +98,9 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@github/relative-time-element": "^4.1.2", - "@lit-labs/react": "^1.1.1", + "@lit-labs/react": "^2.0.1", "@primer/behaviors": "^1.3.4", - "@primer/octicons-react": "^19.3.0", + "@primer/octicons-react": "^19.7.0", "@primer/primitives": "^7.11.11", "@react-aria/ssr": "^3.5.0", "@styled-system/css": "^5.1.5", @@ -256,7 +256,7 @@ "ts-toolbelt": "9.6.0", "typescript": "4.9.5", "typescript-plugin-css-modules": "5.0.1", - "unist-util-find": "1.0.2", + "unist-util-find": "3.0.0", "unist-util-find-before": "4.0.0", "unist-util-flat-filter": "2.0.0", "webpack": "5.88.2", diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json index 14cf798687e..5da95e2cce0 100644 --- a/src/PageLayout/PageLayout.docs.json +++ b/src/PageLayout/PageLayout.docs.json @@ -84,18 +84,6 @@ { "name": "PageLayout.Content", "props": [ - { - "name": "aria-label", - "type": "string | undefined", - "defaultValue": "", - "description": "A unique label for the rendered main landmark" - }, - { - "name": "aria-labelledby", - "type": "string | undefined", - "defaultValue": "", - "description": "An id to an element which uniquely labels the rendered main landmark" - }, { "name": "width", "type": "| 'full' | 'medium' | 'large' | 'xlarge'", diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx index 03abd241912..4ef0db36871 100644 --- a/src/PageLayout/PageLayout.test.tsx +++ b/src/PageLayout/PageLayout.test.tsx @@ -23,7 +23,9 @@ describe('PageLayout', () => { Header - Content + +
Content
+ Pane Footer @@ -131,7 +133,7 @@ describe('PageLayout', () => { ) expect(screen.getByRole('banner')).toHaveAccessibleName('Header') - expect(screen.getByRole('main')).toHaveAccessibleName('Content') + expect(screen.getByLabelText('Content')).toHaveAccessibleName('Content') expect(screen.getByRole('contentinfo')).toHaveAccessibleName('Footer') }) @@ -154,7 +156,7 @@ describe('PageLayout', () => { ) expect(screen.getByRole('banner')).toHaveAccessibleName('header') - expect(screen.getByRole('main')).toHaveAccessibleName('content') + expect(screen.getByLabelText('content')).toBeInTheDocument() expect(screen.getByRole('contentinfo')).toHaveAccessibleName('footer') }) diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx index 71371fc4233..54af5598b73 100644 --- a/src/PageLayout/PageLayout.tsx +++ b/src/PageLayout/PageLayout.tsx @@ -421,7 +421,6 @@ const Content: React.FC> = ({ return ( ( diff --git a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap index 97b5bfbea64..065aef492b0 100644 --- a/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap +++ b/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap @@ -199,7 +199,7 @@ exports[`PageLayout renders condensed layout 1`] = `
-
-
+
@@ -493,7 +493,7 @@ exports[`PageLayout renders default layout 1`] = `
-
- Content +
+ Content +
-
+
@@ -787,7 +791,7 @@ exports[`PageLayout renders pane in different position when narrow 1`] = `
-
-
+
@@ -1081,7 +1085,7 @@ exports[`PageLayout renders with dividers 1`] = `
-
-
+
diff --git a/src/RelativeTime/RelativeTime.tsx b/src/RelativeTime/RelativeTime.tsx index 6b5acc14d61..3d852e7ef66 100644 --- a/src/RelativeTime/RelativeTime.tsx +++ b/src/RelativeTime/RelativeTime.tsx @@ -5,7 +5,13 @@ import {createComponent} from '@lit-labs/react' import {ComponentProps} from '../utils/types' import sx from '../sx' -const RelativeTime = styled(createComponent(React, 'relative-time', RelativeTimeElement))(sx) +const RelativeTime = styled( + createComponent({ + react: React, + tagName: 'relative-time', + elementClass: RelativeTimeElement, + }), +)(sx) export type RelativeTimeProps = ComponentProps export default RelativeTime diff --git a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap index c35d5dc97cd..1486e3792bb 100644 --- a/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap +++ b/src/SplitPageLayout/__snapshots__/SplitPageLayout.test.tsx.snap @@ -234,7 +234,7 @@ exports[`SplitPageLayout renders default layout 1`] = `
-
-
+
diff --git a/src/__tests__/Dialog.test.tsx b/src/__tests__/Dialog.test.tsx index 5d4e51078f6..3dcfd6d0d57 100644 --- a/src/__tests__/Dialog.test.tsx +++ b/src/__tests__/Dialog.test.tsx @@ -137,4 +137,15 @@ describe('Dialog', () => { const triggerButton = getByTestId('trigger-button') expect(document.activeElement).toEqual(triggerButton) }) + + it('Returns focus to returnFocusRef on escape', async () => { + const {getByTestId, queryByTestId} = HTMLRender() + + expect(getByTestId('inner')).toBeTruthy() + fireEvent.keyDown(document.body, {key: 'Escape'}) + + expect(queryByTestId('inner')).toBeNull() + const triggerButton = getByTestId('trigger-button') + expect(document.activeElement).toEqual(triggerButton) + }) }) diff --git a/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap b/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap index b1d5b1f082e..c2211076ba2 100644 --- a/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap +++ b/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap @@ -3,5 +3,6 @@ exports[`RelativeTime renders consistently 1`] = ` `; diff --git a/src/hooks/useDialog.ts b/src/hooks/useDialog.ts index a679431d5b2..f744d3aa500 100644 --- a/src/hooks/useDialog.ts +++ b/src/hooks/useDialog.ts @@ -115,10 +115,12 @@ function useDialog({ useOnEscapePress( (event: KeyboardEvent) => { - onDismiss() - event.preventDefault() + if (isOpen) { + onDismiss() + event.preventDefault() + } }, - [onDismiss], + [isOpen, onDismiss], ) return {getDialogProps}