Merge pull request #2552 from system-ui/lachlanjc-patch-1

components: [Alert] Add ARIA role

Author: hasparus

.github/dependabot.yml

@@ -7,7 +7,6 @@ updates:
       interval: monthly
     open-pull-requests-limit: 10
     ignore:
-      - dependency-name: '@codechecks/client'
       - dependency-name: '*'
         update-types: ['version-update:semver-patch']
       - dependency-name: 'gatsby-plugin-mdx' # pinned to 2.4

.github/workflows/ci.yml

@@ -15,13 +15,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9.12.1
+      - uses: pnpm/action-setup@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           cache: 'pnpm'
 
       - name: Install
@@ -39,11 +37,13 @@ jobs:
       - name: Build
         run: pnpm build
 
-      - name: Run Codechecks
-        run: pnpm codechecks
-        env:
-          CC_SECRET: ${{ secrets.CC_SECRET }}
-        if: ${{ env.CC_SECRET != '' }}
+      # Commented out for now.
+      # - name: Check bundle size
+      #   uses: andresz1/[email protected]
+      #   with:
+      #     github_token: ${{ secrets.GITHUB_TOKEN }}
+      #     skip_step: install
+      #     package_manager: pnpm
 
   # Dependabot and PRs from forks should not release canaries,
   # but secrets and env vars cannot be read in `job.if`, so we check if
@@ -79,13 +79,13 @@ jobs:
           fetch-depth: 100
           fetch-tags: true
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
         with:
-          version: 9.12.1
+          version: 10
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           cache: 'pnpm'
           registry-url: 'https://registry.npmjs.org'
 

.github/workflows/e2e.yml

@@ -21,13 +21,11 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9.12.1
+      - uses: pnpm/action-setup@v4
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 22.x
           cache: 'pnpm'
 
       - name: Install

.nvmrc

@@ -1 +1 @@
-18
+22

.size-limit.json

@@ -0,0 +1,16 @@
+[
+  { "path": "./packages/color/dist/theme-ui-color.esm.js", "gzip": true },
+  { "path": "./packages/color-modes/dist/theme-ui-color-modes.esm.js", "gzip": true },
+  { "path": "./packages/components/dist/theme-ui-components.esm.js", "gzip": true },
+  { "path": "./packages/core/dist/theme-ui-core.esm.js", "gzip": true },
+  { "path": "./packages/css/dist/theme-ui-css.esm.js", "gzip": true },
+  { "path": "./packages/custom-properties/dist/theme-ui-custom-properties.esm.js", "gzip": true },
+  { "path": "./packages/gatsby-plugin-theme-ui/dist/gatsby-plugin-theme-ui.cjs.js", "gzip": true },
+  { "path": "./packages/match-media/dist/theme-ui-match-media.esm.js", "gzip": true },
+  { "path": "./packages/mdx/dist/theme-ui-mdx.esm.js", "gzip": true },
+  { "path": "./packages/parse-props/dist/theme-ui-parse-props.esm.js", "gzip": true },
+  { "path": "./packages/prism/dist/theme-ui-prism.esm.js", "gzip": true },
+  { "path": "./packages/theme-provider/dist/theme-ui-theme-provider.esm.js", "gzip": true },
+  { "path": "./packages/theme-ui/dist/theme-ui.esm.js", "gzip": true },
+  { "path": "./packages/typography/dist/theme-ui-typography.esm.js", "gzip": true }
+]

codechecks.yml

@@ -17,7 +17,7 @@
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^14.0.4",
     "@theme-ui/css": "workspace:^",
-    "next": "^15.1.2",
+    "next": "^15.3.8",
     "react": "^18.1.0",
     "react-dom": "^18",
     "theme-ui": "workspace:^"

examples/next/package.json

@@ -8,13 +8,13 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true
   },
-  "exclude": ["node_modules", ".next", "out"],
+  "exclude": ["node_modules", ".next", "out", "../../packages"],
   "include": ["**/*.ts", "**/*.tsx", "**/*.mdx", "lib/*.d.ts", "next-env.d.ts"]
 }

examples/next/tsconfig.json

@@ -12,6 +12,7 @@
     "lint": "eslint --ext .ts,.tsx,.js \"packages/**/*.{ts,tsx,js,mtsx,mts}\"",
     "test": "cross-env \"NODE_OPTIONS=--experimental-vm-modules --no-warnings\" jest",
     "test:coverage": "cross-env \"NODE_OPTIONS=--experimental-vm-modules --no-warnings\" jest --coverage",
+    "test:update-snapshots": "cross-env \"NODE_OPTIONS=--experimental-vm-modules --no-warnings\" jest --updateSnapshot",
     "typecheck": "tsc --noEmit",
     "typecheck:tests": "tsc --noEmit -P ./tsconfig.test.json",
     "logo": "pnpm run --filter docs logo",
@@ -60,7 +61,14 @@
         "@typescript-eslint/parser": "*",
         "@typescript-eslint/eslint-plugin": "*"
       }
-    }
+    },
+    "onlyBuiltDependencies": [
+      "@percy/core",
+      "cypress",
+      "esbuild",
+      "gatsby",
+      "sharp"
+    ]
   },
   "dependencies": {
     "@auto-it/all-contributors": "^11.2.1",
@@ -71,31 +79,29 @@
     "@auto-it/npm": "^11.2.1",
     "@auto-it/omit-commits": "^11.2.1",
     "@auto-it/released": "^11.2.1",
-    "@babel/cli": "^7.22.5",
-    "@babel/helper-string-parser": "^7.22.5",
-    "@babel/helper-validator-identifier": "^7.22.5",
+    "@babel/cli": "^7.28.3",
+    "@babel/helper-string-parser": "^7.27.1",
+    "@babel/helper-validator-identifier": "^7.28.5",
     "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@babel/runtime": "^7.25.7",
-    "@codechecks/build-size-watcher": "^0.1.0",
-    "@codechecks/client": "0.1.12",
-    "@emotion/jest": "^11.13.0",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@emotion/jest": "^11.14.2",
     "@jest/types": "^29.6.3",
-    "@preconstruct/cli": "^2.8.9",
+    "@preconstruct/cli": "^2.8.12",
     "@testing-library/react": "^14.2.1",
     "@types/eslint": "8.56.2",
     "@types/jest": "^29.5.13",
     "@types/node": "^20.3.1",
     "@types/react-dom": "^18.2.5",
     "@types/react-test-renderer": "^18.3.0",
-    "@types/semver": "^7.5.0",
+    "@types/semver": "^7.7.1",
     "@typescript-eslint/eslint-plugin": "^5.59.11",
     "@typescript-eslint/parser": "^5.59.11",
-    "auto": "^11.2.1",
+    "auto": "^11.3.6",
     "babel-jest": "^29.7.0",
-    "babel-preset-gatsby": "^3.13.2",
+    "babel-preset-gatsby": "^3.15.0",
     "cross-env": "^7.0.3",
     "egzek": "^1.2.0",
     "eslint": "^8.56.0",
@@ -104,16 +110,18 @@
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-mock-console": "^2.0.0",
-    "jest-ts-webcompat-resolver": "^1.0.0",
+    "jest-ts-webcompat-resolver": "^1.0.1",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.8",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^5.0.1",
-    "semver": "^7.6.3",
-    "ts-jest": "^29.2.5",
+    "semver": "^7.7.3",
+    "ts-jest": "^29.4.6",
     "ts-toolbelt": "^9.6.0",
     "typecov": "^0.2.3",
-    "typescript": "^5.6.3"
+    "typescript": "^5.9.3",
+    "@size-limit/preset-big-lib": "12.0.0",
+    "size-limit": "12.0.0"
   },
-  "packageManager": "pnpm@9.12.1+sha512.e5a7e52a4183a02d5931057f7a0dbff9d5e9ce3161e33fa68ae392125b79282a8a8a470a51dfc8a0ed86221442eb2fb57019b0990ed24fab519bf0e1bc5ccfc4"
+  "packageManager": "pnpm@10.26.2"
 }

package.json

@@ -18,6 +18,7 @@ export const Alert: ForwardRef<HTMLDivElement, AlertProps> = React.forwardRef(
       <Box
         ref={ref}
         variant="primary"
+        role="alert"
         {...props}
         {...__internalProps({
           __themeKey: 'alerts',