Merge pull request #1571 from dequelabs/release-v6.4.2

chore(cauldron): Release 6.4.2
dequelabs · Jul 10, 2024 · c6aaa5a · c6aaa5a
2 parents f886a5c + 0ff987f
commit c6aaa5a
Show file tree

Hide file tree

Showing 59 changed files with 4,905 additions and 4,085 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -4,13 +4,33 @@ updates:
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
-      interval: "monthly"
-    open-pull-requests-limit: 10
+      interval: "weekly"
     commit-message:
-      prefix: 'chore'
+      prefix: "chore"
     groups:
       # Any updates not caught by the group config will get individual PRs
       gha-low-risk:
         update-types:
           - 'minor'
           - 'patch'
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    commit-message:
+      prefix: "chore"
+    groups:
+      update-playwright:
+        patterns:
+          - "playwright"
+          - "@playwright/*"
+      update-babel:
+        patterns:
+          - "babel-*"
+          - "@babel/*"
+    ignore:
+      # Prevent updates to ESM-only versions
+      - dependency-name: 'log-symbols'
+        versions: ['>=5.0.0']
+      - dependency-name: 'chalk'
+        versions: ['>=5.0.0']
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [6.4.2](https://github.com/dequelabs/cauldron/compare/v6.4.1...v6.4.2) (2024-07-10)
+
+
+### Bug Fixes
+
+* **Dialog:** switch dialog tests to react testing library and fix heading type ([#1501](https://github.com/dequelabs/cauldron/issues/1501)) ([3b7a548](https://github.com/dequelabs/cauldron/commit/3b7a548163d0e0d78c79e7fdba0d79b60e004724))
+* **react:** fix incorrect React.Fragment for ContentNode type ([#1521](https://github.com/dequelabs/cauldron/issues/1521)) ([2f7e190](https://github.com/dequelabs/cauldron/commit/2f7e190a85a96c9b6eb5ee64002f4341bdd08d19))
+* **react:** use capture phase instead of bubble phase for esc keypress on Tooltip ([#1569](https://github.com/dequelabs/cauldron/issues/1569)) ([1bc0e02](https://github.com/dequelabs/cauldron/commit/1bc0e02ab25d6fbb900896394de59da3fe3c2916))
+
 ### [6.4.1](https://github.com/dequelabs/cauldron/compare/v6.4.0...v6.4.1) (2024-06-05)
 
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -52,7 +52,6 @@ General [component guidelines](https://cauldron.dequelabs.com/component-guidelin
 - [Jest](https://jestjs.io/)
 - [axe-core](https://github.com/dequelabs/axe-core)
 - [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
-- [enzymejs](https://enzymejs.github.io/enzyme)
 - [MDXJS](https://mdxjs.com/)
 - [ESLint](https://eslint.org/)
 - [Prettier](https://prettier.io/)
@@ -173,9 +172,6 @@ The testing methodology should account for both testing the interface of a compo
 
 Cauldron uses [Jest](https://jestjs.io/) as its test runner to run unit tests along with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
 
-> [!IMPORTANT]  
-> We are currently in the process of migrating existing tests away from Enzyme to React Testing Library. New tests should **not** be written in Enzyme.
-
 ### Accessibility Testing
 
 #### Ensuring component returns no violations (in unit test)

diff --git a/README.md b/README.md
@@ -7,11 +7,11 @@ This monorepo contains the following packages:
 - cauldron-styles ([`packages/styles`](packages/styles/README.md))
 - cauldron-react ([`packages/react`](packages/react/README.md))
 
-It also contains the documentation / demo app (see `docs/`)
+It also contains the documentation/demo app (see `docs/`)
 
 ## purpose
 
-Friends don’t let friends ship inaccessible code! These accessible packages include everything from typography and colors, to components like custom form controls. The design and interactions shown throughout this site are intended to show how Deque provides accessible experiences for the users of our own products - through the use of common, accessible components like these.
+Friends don’t let friends ship inaccessible code! These accessible packages include everything from typography and colors to components like custom form controls. The design and interactions shown throughout this site are intended to show how Deque provides accessible experiences for the users of our products - through the use of common, accessible components like these.
 
 ## usage
 
@@ -43,7 +43,7 @@ $ yarn build
 $ yarn dev
 ```
 
-navigate browser to http://localhost:8003/
+navigate the browser to http://localhost:8003/
 
 ### run tests
 

diff --git a/docs/collections.ts b/docs/collections.ts
@@ -38,6 +38,7 @@ const collections: Collections = (require as any)
           default: Component,
           title,
           path,
+          frontmatter,
           ...props
         } = require(`./pages/${name}.mdx`);
         const component = {
@@ -46,6 +47,7 @@ const collections: Collections = (require as any)
           Component,
           path: path || `/${name}`,
           filepath,
+          ...frontmatter,
           ...props
         };
         collections.pages.push(component);
@@ -55,6 +57,7 @@ const collections: Collections = (require as any)
           default: Component,
           title,
           path,
+          frontmatter,
           ...props
         } = require(`./pages/components/${name}.mdx`);
         const component = {
@@ -63,6 +66,7 @@ const collections: Collections = (require as any)
           Component,
           path: path || `/components/${name}`,
           filepath,
+          ...frontmatter,
           ...props
         };
         collections.components.push(component);
@@ -72,6 +76,7 @@ const collections: Collections = (require as any)
           default: Component,
           title,
           path,
+          frontmatter,
           ...props
         } = require(`./pages/foundations/${name}.mdx`);
         const component = {
@@ -80,6 +85,7 @@ const collections: Collections = (require as any)
           Component,
           path: path || `/foundations/${name}`,
           filepath,
+          ...frontmatter,
           ...props
         };
         collections.foundations.push(component);

diff --git a/docs/readme.md b/docs/readme.md
@@ -1,6 +1,6 @@
 # Documentation
 
-Cauldron documentation is a mix of [mdxjs](https://mdxjs.com/) and custom react components to scaffold documentation.
+Cauldron documentation is a mix of [mdxjs](https://mdxjs.com/) and custom React components to scaffold documentation.
 
 ## Structure
 
@@ -10,7 +10,7 @@ Cauldron documentation is a mix of [mdxjs](https://mdxjs.com/) and custom react
 ├── Demo/               # Deprecated documentation, do not use
 ├── pages/              # MDX components mapping to specific pages in documentation
 │   └── components/     # MDX component level documentation
-├── utils/              # Shared utilites for documentation
+├── utils/              # Shared utilities for documentation
 ├── mdx-components.tsx  # Used to allow for rendering of html tags for custom components (see https://mdxjs.com/table-of-components/)
 └── remark-plugins.tsx  # Remark plugins to transform markdown ast - mainly used to support things like TOCs and front matter
 ```
@@ -21,9 +21,9 @@ To add documentation for a component, add a `.mdx` file to `pages/components` wi
 
 - `title` - Will be used as the title and primary heading of the component
 - `description` - A short description of the component
-- `source` - A url to the github source of the component
+- `source` - A URL to the GitHub source of the component
 
-An example of frontmatter for the Button component as follows:
+An example of frontmatter for the Button component is as follows:
 
 ```md
 ---
@@ -35,14 +35,14 @@ source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/co
 
 Frontmatter can also include:
 
-- `deprecated` - boolean value flagging the component as deprecated (which displays a tag and displays component in a separate deprecated section)
-- `path` - Used when the url path needs to be different than the default name of the mdx file
+- `deprecated` - boolean value flagging the component as deprecated (which displays a tag and displays the component in a separate deprecated section)
+- `path` - Used when the URL path needs to be different than the default name of the MDX file
 
 ### Writing Good Documentation
 
 Good documentation should try to cover different use cases for the component, and include the when, why, and how of a component. This includes things like:
 
 - Showing examples of a component with different variants and states
-- Calling out specific accessibility requirements if there's a common need for a component to set things like labels or ids
+- Calling out specific accessibility requirements if there's a common need for a component to set things like labels or IDs
 - Including documentation for all of the component props
 - Providing references to other components that may be related
diff --git a/e2e/Dockerfile b/e2e/Dockerfile
@@ -1,4 +1,4 @@
-ARG playwright_version=1.44.0
+ARG playwright_version=latest
 FROM mcr.microsoft.com/playwright:v$playwright_version-jammy
 
 WORKDIR /app

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "6.4.1",
+  "version": "6.4.2",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",
@@ -22,7 +22,7 @@
     "test:a11y": "ts-node e2e/accessibility.ts",
     "postinstall": "if [ -z \"$CI\" ]; then yarn --cwd=packages/styles && yarn --cwd=packages/react; fi",
     "screenshots": "docker run --rm --ipc=host -v $(pwd)/playwright-ct.config.ts:/app/playwright-ct.config.ts -v $(pwd)/packages:/app/packages -v $(pwd)/e2e:/app/e2e -v $(pwd)/e2e:/app/e2e cauldron-playwright-e2e-screenshots",
-    "screenshots:docker": "docker build . -t cauldron-playwright-e2e-screenshots -f e2e/Dockerfile",
+    "screenshots:docker": "docker build . -t cauldron-playwright-e2e-screenshots -f e2e/Dockerfile --build-arg playwright_version=$(npm list --depth=0 playwright | grep playwright | cut -f2 -d '@')",
     "release": "./scripts/release.sh"
   },
   "prettier": {
@@ -47,30 +47,30 @@
   },
   "devDependencies": {
     "@axe-core/puppeteer": "^4.8.1",
-    "@babel/core": "^7.22.10",
-    "@babel/plugin-proposal-export-default-from": "^7.22.5",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-proposal-export-default-from": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@fontsource/lato": "^4.5.0",
-    "@fontsource/pt-mono": "^4.5.0",
+    "@fontsource/pt-mono": "^5.0.13",
     "@fontsource/roboto": "^4.5.1",
     "@mdx-js/loader": "^2.3.0",
-    "@playwright/experimental-ct-react17": "^1.44.0",
-    "@playwright/test": "^1.44.0",
+    "@playwright/experimental-ct-react17": "^1.45.1",
+    "@playwright/test": "^1.45.1",
     "@types/classnames": "^2.2.9",
-    "@types/express": "^4.17.13",
+    "@types/express": "^4.17.21",
     "@types/node": "^18.0.0",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.9.4",
     "@types/react-router-dom": "^5.3.2",
-    "@types/webpack-env": "^1.18.0",
+    "@types/webpack-env": "^1.18.5",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "autoprefixer": "^9.7.6",
     "axe-core": "^4.8.2",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-module-resolver": "^3.0.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-transform-export-extensions": "^6.22.0",
     "chalk": "^4.1.2",
     "classnames": "^2.2.6",
@@ -79,22 +79,20 @@
     "css-loader": "^0.28.7",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-ssr-friendly": "^1.3.0",
     "express": "^4.19.2",
     "focusable": "^2.3.0",
-    "fontsource-lato": "^4.0.0",
-    "fontsource-roboto": "^3.0.3",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.6.0",
     "husky": "^1.0.0-rc.14",
     "lint-staged": "^7.2.2",
     "log-symbols": "4",
     "mdast-util-from-markdown": "^1.3.0",
     "mdast-util-mdx": "^2.0.1",
     "micromark-extension-mdxjs": "^1.0.0",
-    "mini-css-extract-plugin": "^2.7.2",
+    "mini-css-extract-plugin": "^2.9.0",
     "node-fetch": "^3.3.0",
     "p-queue": "^6",
     "playwright": "^1.44.0",
@@ -107,19 +105,19 @@
     "react-dom": "^16.13.1",
     "react-helmet": "^5.2.1",
     "react-router-dom": "^5.3.0",
-    "remark-frontmatter": "^4.0.1",
+    "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^3.0.1",
-    "remark-mdx-frontmatter": "^2.1.1",
+    "remark-mdx-frontmatter": "^5.0.0",
     "remark-mdx-toc": "^0.3.1",
     "rimraf": "^4.3.1",
     "slugify": "^1.6.5",
     "standard-version": "^9.1.1",
     "style-loader": "^0.19.0",
     "terser-webpack-plugin": "^5.3.6",
-    "ts-node": "^10.9.1",
-    "typescript": "~5.0.0",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.5.2",
     "webpack": "^5.76.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^5.0.4"
   }
 }
diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
   plugins: ['ssr-friendly'],
   overrides: [
     {
-      files: ['__tests__/**/*', '**/*/*.test.{j,t}sx', 'src/setupTests.ts'],
+      files: ['**/*/*.test.{j,t}sx', 'src/setupTests.ts'],
       rules: {
         'ssr-friendly/no-dom-globals-in-module-scope': 'off',
         'ssr-friendly/no-dom-globals-in-constructor': 'off',

diff --git a/packages/react/__tests__/.eslintrc.js b/packages/react/__tests__/.eslintrc.js
diff --git a/packages/react/__tests__/axe.ts b/packages/react/__tests__/axe.ts
diff --git a/packages/react/__tests__/hljsMock.js b/packages/react/__tests__/hljsMock.js
diff --git a/packages/react/__tests__/reactSyntaxHighlighterMock.js b/packages/react/__tests__/reactSyntaxHighlighterMock.js
diff --git a/packages/react/__tests__/setupTests.ts b/packages/react/__tests__/setupTests.ts