Merge remote-tracking branch 'upstream/master' into fix-design-kits-s…

…howcase

.circleci/config.yml

@@ -72,7 +72,7 @@ commands:
       - run:
           name: Resolve react version
           command: |
-            node scripts/use-react-version
+            node scripts/useReactVersion.mjs
             # log a patch for maintainers who want to check out this change
             git --no-pager diff HEAD
       - restore_cache:
@@ -286,7 +286,7 @@ jobs:
 
       - run:
           name: Any defect declaration files?
-          command: node scripts/testBuiltTypes.js
+          command: node scripts/testBuiltTypes.mjs
       - save_cache:
           name: Save generated declaration files
           key: typescript-declaration-files-{{ .Branch }}-{{ .Revision }}
@@ -305,7 +305,7 @@ jobs:
           environment:
             TYPESCRIPT_DIST_TAG: next
           command: |
-            node scripts/use-typescript-dist-tag
+            node scripts/useTypescriptDistTag.mjs
             # log a patch for maintainers who want to check out this change
             git --no-pager diff HEAD
       - install_js
@@ -342,7 +342,7 @@ jobs:
             # Fixing these takes some effort that isn't viable to merge in a single PR.
             # We'll simply monitor them for now.
             set +e
-            node scripts/testBuiltTypes.js
+            node scripts/testBuiltTypes.mjs
             exit 0
   test_browser:
     <<: *defaults

.eslintrc.js

@@ -177,6 +177,7 @@ module.exports = {
       files: [
         // matching the pattern of the test runner
         '*.test.js',
+        '*.test.mjs',
         '*.test.ts',
         '*.test.tsx',
       ],
@@ -407,5 +408,11 @@ module.exports = {
         'import/extensions': ['error', 'ignorePackages'],
       },
     },
+    {
+      files: ['scripts/**/*.mjs'],
+      rules: {
+        'import/extensions': ['error', 'ignorePackages'],
+      },
+    },
   ],
 };

.github/codeql/codeql-config.yml

@@ -1,4 +1,4 @@
 name: CodeQL configuration
 
 paths-ignore:
-  - 'packages/mui-icons-material/lib/esm/**'
+  - 'packages/mui-icons-material/lib/**'

.github/workflows/check-if-pr-has-label.yml

@@ -13,7 +13,7 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: mnajdova/github-action-required-labels@ca0df9249827e43aa4b4a0d25d9fe3e9b19b0705 # tag=v2.1
+      - uses: mnajdova/github-action-required-labels@ca0df9249827e43aa4b4a0d25d9fe3e9b19b0705 # v2.1.0
         with:
           mode: minimum
           count: 1

.github/workflows/ci.yml

@@ -7,9 +7,6 @@ on:
       # We don't need to run CI twice (push+pull_request)
       - 'renovate/**'
   pull_request:
-    paths-ignore:
-      - 'docs/**'
-      - 'examples/**'
 
 permissions: {}
 
@@ -24,12 +21,12 @@ jobs:
         os: [macos-latest, windows-latest, ubuntu-latest]
     steps:
       - run: echo "${{ github.actor }}"
-      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3
+      - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
         with:
           # fetch all tags which are required for `yarn release:changelog`
           fetch-depth: 0
       - name: Use Node.js 14.x
-        uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3
+        uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1
         with:
           node-version: 14
           cache: 'yarn' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies

.github/workflows/codeql.yml

@@ -16,10 +16,10 @@ jobs:
       security-events: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3
+        uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2
+        uses: github/codeql-action/init@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2.1.13
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2
+        uses: github/codeql-action/analyze@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2.1.13

.github/workflows/maintenance.yml

@@ -1,7 +1,5 @@
 name: Maintenance
 
-permissions: {}
-
 on:
   # So that PRs touching the same files as the push are updated
   push:
@@ -17,6 +15,8 @@ on:
       - next
     types: [synchronize]
 
+permissions: {}
+
 jobs:
   main:
     # l10nbot creates a lot of commits at once which starves CI.
@@ -29,7 +29,7 @@ jobs:
     steps:
       - run: echo "${{ github.actor }}"
       - name: check if prs are dirty
-        uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # tag=v2.1.0
+        uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # v2.1.0
         with:
           dirtyLabel: 'PR: out-of-date'
           removeOnDirtyLabel: 'PR: ready to ship'

.github/workflows/mark-duplicate.yml

@@ -14,7 +14,7 @@ jobs:
       issues: write
     steps:
       - name: mark-duplicate
-        uses: actions-cool/issues-helper@02811b26b65e9c0da5f1d8a0095b53478d6591a2 # tag=v3
+        uses: actions-cool/issues-helper@275328970dbc3bfc3bc43f5fe741bf3638300c0a # v3.3.3
         with:
           actions: 'mark-duplicate'
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/no-response.yml

@@ -18,7 +18,7 @@ jobs:
       contents: read
       issues: write
     steps:
-      - uses: lee-dohm/no-response@9bb0a4b5e6a45046f00353d5de7d90fb8bd773bb # tag=v0.5.0
+      - uses: lee-dohm/no-response@9bb0a4b5e6a45046f00353d5de7d90fb8bd773bb # v0.5.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           # Number of days of inactivity before an Issue is closed for lack of response

.github/workflows/scorecards.yml

@@ -27,22 +27,22 @@ jobs:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@99c53751e09b9529366343771cc321ec74e9bd3d # renovate: tag=v2.0.6
+        uses: ossf/scorecard-action@99c53751e09b9529366343771cc321ec74e9bd3d # v2.0.6
         with:
           results_file: results.sarif
           results_format: sarif
           # (Optional) Read-only PAT token. Uncomment the `repo_token` line below if:
           # - you want to enable the Branch-Protection check on a *public* repository, or
           # - you are installing Scorecards on a *private* repository
           # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action#authentication-with-pat.
-          # repo_token: ${{ secrets.SCORECARD_READ_TOKEN }}
+          repo_token: ${{ secrets.SCORECARD_READ_TOKEN }}
 
           # Publish the results for public repositories to enable scorecard badges. For more details, see
           # https://github.com/ossf/scorecard-action#publishing-results.
           publish_results: true
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@5f532563584d71fdef14ee64d17bafb34f751ce5 # renovate: tag=v1.0.26
+        uses: github/codeql-action/upload-sarif@9e288b03632e540432812c08ffaef313da7fb1d9 # v1.1.31
         with:
           sarif_file: results.sarif

.github/workflows/support-stackoverflow.yml

@@ -14,7 +14,7 @@ jobs:
       contents: read
       issues: write
     steps:
-      - uses: dessant/support-requests@876a4de3922dd57434a451e58ad679f986c5da97 # tag=v2
+      - uses: dessant/support-requests@876a4de3922dd57434a451e58ad679f986c5da97 # v2.1.2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           # Label used to mark issues as support requests

.mocharc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extension: ['js', 'ts', 'tsx'],
+  extension: ['js', 'mjs', 'ts', 'tsx'],
   ignore: [
     '**/build/**',
     '**/node_modules/**',

README.md

@@ -119,7 +119,7 @@ Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engi
 
 ### Diamond 💎
 
-<p align="center">
+<p>
   <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://i.ibb.co/w0HF0Nz/Logo-Blue-140px-rgb.png" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
   <a href="https://www.doit.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars.githubusercontent.com/u/8424863?s=256" alt="doit" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
   <a href="https://www.zesty.io/integrations/mui-nextjs/?utm_source=mui&utm_medium=referral&utm_campaign=sponsor" rel="noopener sponsored" target="_blank"><img height="90" width="90" src="https://brand.zesty.io/zesty-io-logo.svg" alt="zesty.io" title="The only Next.js CMS you need" loading="lazy" /></a>
@@ -131,7 +131,7 @@ Diamond Sponsors are those who have pledged \$1,500/month or more to MUI.
 
 via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari)
 
-<p align="center">
+<p>
   <a href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=npm-material-ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/30204434?s=192" alt="tidelift.com" title="Enterprise-ready open-source software" loading="lazy" /></a>
   <a href="https://bit.dev/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank" style="margin-rig ht: 16px;"><img height="96" width="96" src="https://avatars.githubusercontent.com/u/24789812?s=192" alt="bit.dev" title="The fastest way to share code" loading="lazy" /></a>
   <a href="https://www.text-em-all.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img src="https://avatars.githubusercontent.com/u/1262264?s=192" alt="text-em-all.com" title="Mass Text Messaging & Automated Calling" height="96" width="96" loading="lazy"></a>
@@ -141,6 +141,7 @@ via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://ww
   <a href="https://goread.io/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/goread_io/eb6337d/logo/192.png" alt="goread.io" title="Instagram followers, likes, power likes, views, comments, saves in minutes." loading="lazy" /></a>
   <a href="https://icons8.com?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/icons8/7fa1641/logo/192.png" alt="Icons8" title="We provide the neat icons, photos, illustrations, and music. Developers, use our API to insert all the content we have into your apps." loading="lazy"></a>
   <a href="https://ipinfo.ai?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/ipinfoai/04f41d5/logo/192.png" alt="ipinfo.ai" title="We offer various IP data API services, including IP Geolocation Data, ASN Data, Company Data, IP Ranges Data, Abuse Contacts Data, Anonymous Browsing Detection, etc." loading="lazy"></a>
+  <a href="https://ridicorp.com?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="96" width="96" src="https://images.opencollective.com/ridi-corporation/175dcf3/logo/192.png" alt="RIDI" title="RIDI is a South Korean digital content platform that offers webcomics, webnovels, animations, eBooks, and more." loading="lazy"></a>
 </p>
 
 Gold Sponsors are those who have pledged \$500/month or more to MUI.

docs/data/material/customization/color/color.md

@@ -109,3 +109,11 @@ const primary = red[500]; // #f44336
 const accent = purple['A200']; // #e040fb
 const accent = purple.A200; // #e040fb (alternative method)
 ```
+
+### Accessibility
+
+[WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) does recommend
+that you have a minimum of a 4.5:1 contrast ratio for the visual presentation of text and images of text.
+Material UI currently only enforces a 3:1 contrast ratio. If you would like to meet WCAG 2.1 AA compliance,
+you can increase your minimum contrast ratio as described in the
+[Theme customization](/material-ui/customization/palette/#accessibility) section.

docs/data/material/customization/palette/palette.md

@@ -130,9 +130,24 @@ type PaletteTonalOffset =
 
 A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker.
 A higher value for "contrastThreshold" increases the point at which a background color is considered
-light, and given a dark "contrastText".
+light, and given a dark "contrastText". Note that "contrastThreshold" follows a non-linear curve, and
+starts with a value of 3 (requiring a minimum contrast ratio of 3:1).
 
-Note that "contrastThreshold" follows a non-linear curve.
+### Accessibility
+
+To meet the minimum contrast of at least 4.5:1 as defined in [WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), create a custom theme with `contrastThreshold: 4.5`.
+
+```js
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    // Used by `getContrastText()` to maximize the contrast between
+    // the background and the text.
+    contrastThreshold: 4.5,
+  },
+});
+```
 
 ### Example