Merge branch 'main' into renovate/eslint-config-prettier-9.x

.github/workflows/deploy-packages.yml

@@ -12,49 +12,6 @@ on:
       - completed
 
 jobs:
-  carbon-website:
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          repository: carbon-design-system/carbon-website
-          ref: main
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18.x'
-          registry-url: 'https://registry.npmjs.org'
-      - name: Update dependencies
-        run: |
-          yarn upgrade \
-            @carbon/elements@next \
-            @carbon/pictograms@next \
-            @carbon/pictograms-react@next \
-            @carbon/icons-react@next \
-            @carbon/react@next
-      - name: Generate token
-        uses: tibdex/github-app-token@v1
-        id: generate_token
-        with:
-          app_id: ${{ secrets.APP_ID }}
-          private_key: ${{ secrets.APP_PRIVATE_KEY }}
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v5
-        with:
-          branch: 'release/update-carbon-deps'
-          commit-message: 'chore(release): update carbon deps'
-          delete-branch: true
-          title: 'chore(release): update carbon deps'
-          token: ${{ steps.generate_token.outputs.token }}
-          body: |
-            Automated pull request to update Carbon on the website
-
-            **Checklist**
-
-            - [ ] Verify package version bumps are accurate
-            - [ ] Verify CI passes as expected
-            - [ ] Verify no regressions on the website in the deploy preview
   design-language-website:
     runs-on: ubuntu-latest
     timeout-minutes: 15
@@ -133,7 +90,7 @@ jobs:
           title: 'chore(release): update carbon deps'
           token: ${{ steps.generate_token.outputs.token }}
           body: |
-            Automated pull request to update Carbon on the website
+            Automated pull request to update Carbon in gatsby-theme-carbon
 
             **Checklist**
 

.github/workflows/deploy-react-storybook.yml

@@ -26,7 +26,7 @@ concurrency:
 
 jobs:
   build:
-    runs-on: macos-11
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@main
       - name: Use Node.js 18.x
@@ -43,6 +43,11 @@ jobs:
           yarn storybook:build
       - name: Setup Pages
         uses: actions/configure-pages@v3
+      - name: Fix permissions
+        run: |
+          chmod -v -R +rX "_site/" | while read line; do
+            echo "::warning title=Invalid file permissions automatically fixed::$line"
+          done
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:

.github/workflows/nightly-release.yml

@@ -7,7 +7,7 @@ on:
 
 jobs:
   release:
-    runs-on: macos-11
+    runs-on: macos-13
     # Needed as recommended by npm docs on publishing with provenance https://docs.npmjs.com/generating-provenance-statements
     permissions:
       id-token: write

.yarnrc.yml

@@ -20,4 +20,4 @@ supportedArchitectures:
     - linux
     - win32
 
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.2.cjs

catalog-info.yaml

@@ -0,0 +1,45 @@
+---
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: carbon
+  description: Carbon is an open-source design system built by IBM
+  tags:
+    - carbon
+    - designsystem
+  annotations:
+    github.com/project-slug: carbon-design-system/carbon
+  links:
+    - url: https://carbondesignsystem.com
+      title: Carbon Design System website
+    - url: https://ibm-studios.slack.com/archives/C0M053VPT
+      title: Internal carbon-design-system Slack channel
+    - url: https://discord.gg/J7JEUEkTRX
+      title: Discord channel
+spec:
+  type: library
+  lifecycle: production
+  owner: carbon
+---
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: carbon-react
+  description: React components for the Carbon Design System
+  tags:
+    - carbon
+    - react
+  links:
+    - url: http://react.carbondesignsystem.com
+      title: Storybook
+    - url: https://ibm-studios.slack.com/archives/C2K6RFJ1G
+      title: Internal carbon-react slack channel
+    - url: https://carbondesignsystem.com/developing/frameworks/react/
+      title: How-to docs and guidelines
+spec:
+  type: library
+  lifecycle: production
+  subcomponentOf: carbon
+  owner: carbon
+---
+

config/jest-config-carbon/package.json

@@ -2,7 +2,7 @@
   "name": "jest-config-carbon",
   "private": true,
   "description": "Jest configuration and preset for Carbon",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

docs/release-schedule.md

@@ -53,6 +53,44 @@ Maintenance release, please
 [open an issue](https://github.com/carbon-design-system/carbon/issues/new?assignees=&labels=type%3A+bug+%F0%9F%90%9B&projects=&template=BUG_REPORT.yaml&title=%5BBug%5D%3A+)
 and include a link to the v11 fix pull request.
 
+Changes required for critical security and bug fixes may lead to semver-major
+changes landing within a release stream, such situations will be rare and will
+land as semver-minor. Although, those changes should have a revert option
+included.
+
+The term 'supported release lines' will be used to refer to all release lines
+that are not End-of-Life.
+
+## Accessibility
+
+Active release lines are tested using IBMa's `accessibility-checker` in a real
+browser environment to ensure accessibility compliance. The most current ruleset
+is used for these automated tests. These tests cover default component states,
+complex/interior component states (like open, focused, etc.) as well as keyboard
+navigation flows.
+
+Rulesets are a moving target though. What was once fully compliant can be
+non-compliant again as new standards, rules, and techniques are required in new
+rulesets.
+
+Beginning with v11, tests are run against the most current ruleset at the time
+of release. Versions are not re-tested against newer or older rulesets. For
+instance, v11.35.0 was released on Aug 17 2023 and at the time the current
+ruleset was the `August 09 2023 Deployment`. This release was not tested on
+prior rulesets and will not be tested on rulesets newer than the
+`August 09 2023 Deployment`. Rulesets and their deployment dates can be found on
+the
+[IBM Accessibility website](https://www.ibm.com/able/requirements/checker-rule-sets/).
+
+For these reasons, we recommend staying up to date with the latest active
+version line to ensure the greatest accessibility compliance, particularly when
+a new major version is released.
+
+`Maintenance` release lines are not tested against newer rulesets. If you're
+using a maintenance release line, there may be gaps in accessibility that you
+will need to patch yourself or submit a fix by
+[opening a pull request](https://github.com/carbon-design-system/carbon/blob/main/.github/CONTRIBUTING.md).
+
 ## Assets managed under this release schedule
 
 This plan covers the design and development assets under maintenance of the

docs/release.md

@@ -110,9 +110,6 @@ git push upstream v11.2.0-rc.0
 
 - [ ] Verify that this triggers a run of the
       [Release Workflow](https://github.com/carbon-design-system/carbon/actions/workflows/release.yml)
-- [ ] Review and approve the Pull Request generated from this action on the
-      [Carbon Website](https://github.com/carbon-design-system/carbon-website)
-      to verify no breaking changes have occurred in this release
 
 #### Releasing another prerelease
 
@@ -164,13 +161,33 @@ git push upstream v11.2.0
 
 - [ ] Verify that this triggers a run of the
       [Release Workflow](https://github.com/carbon-design-system/carbon/actions/workflows/release.yml)
-- [ ] Review and approve the Pull Request generated from this action on the
-      [Carbon Website](https://github.com/carbon-design-system/carbon-website)
+- [ ] Review and approve the Pull Request generated from this action in
+      [gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon/pulls)
       to verify no breaking changes have occurred in this release. If the PR
       from the previous release was not merged, the existing PR will be updated.
 
 **Friday**
 
+After the PR to the Carbon Gatsby theme is merged it will trigger an automated
+release of the theme. To then update the Carbon website to the latest version of
+Carbon and gatsby-theme-carbon you will need to:
+
+- [ ] Check that the
+      [chore(release): update carbon deps](https://github.com/carbon-design-system/gatsby-theme-carbon/pulls)
+      PR has been merged in the gatsby-theme-carbon repo.
+- [ ] Check that
+      [gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon)
+      has been released and is on the
+      [latest version](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/gatsby-theme-carbon/package.json)
+      of Carbon
+- [ ] Run the
+      [Update Carbon and gatsby-theme-carbon deps workflow](https://github.com/carbon-design-system/carbon-website/actions/workflows/update-carbon-gatsby-deps.yml)
+      to automatically open a PR in the Carbon website to update to latest
+      Carbon and gatsby-theme-carbon versions.
+- [ ] Review and approve the
+      [pull request](https://github.com/carbon-design-system/carbon-website/pulls)
+      generate by the workflow.
+
 The packages that have been published will be switched to latest on the first
 Friday of a sprint. To make the switch, you will need to:
 

e2e/components/Dropdown/Dropdown-test.avt.e2e.js

@@ -53,35 +53,42 @@ test.describe('Dropdown @avt', () => {
         theme: 'white',
       },
     });
-    await expect(page.getByRole('combobox')).toBeVisible();
+    const toggleButton = page.getByRole('combobox');
+    const menu = page.getByRole('listbox');
 
+    await expect(toggleButton).toBeVisible();
     // Tab and open the Dropdown with Arrow Down
     await page.keyboard.press('Tab');
-    const toggleButton = page.getByRole('combobox');
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('ArrowDown');
-    await expect(page.getByRole('listbox')).toBeVisible();
+    await expect(menu).toBeVisible();
+    // Close with Escape, retain focus, and open with Space
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('Space');
+    await expect(menu).toBeVisible();
     // Close with Escape, retain focus, and open with Enter
     await page.keyboard.press('Escape');
-    await expect(page.getByRole('listbox')).not.toBeVisible();
+    await expect(menu).not.toBeVisible();
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
     // Navigation inside the menu
     await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
         name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
-        selected: true,
       })
-    ).toBeVisible();
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
     // move to second option
     await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
         name: 'Option 1',
-        selected: true,
       })
-    ).toBeVisible();
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
     // select second option
     await page.keyboard.press('Enter');
     // focus comes back to the toggle button

e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js

@@ -44,16 +44,14 @@ test.describe('MultiSelect @avt', () => {
         theme: 'white',
       },
     });
-    const toggleButton = page.getByRole('button');
-    const menu = page.getByRole('listbox');
+    const toggleButton = page.getByRole('combobox');
 
     await expect(toggleButton).toBeVisible();
     // Tab and open the MultiSelect
     await page.keyboard.press('Tab');
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(page.getByRole('combobox', { expanded: true })).toBeVisible;
-    await expect(menu).toBeFocused();
 
     await expect(page).toHaveNoACViolations('MultiSelect-open');
   });
@@ -67,16 +65,14 @@ test.describe('MultiSelect @avt', () => {
         theme: 'white',
       },
     });
-    const toggleButton = page.getByRole('button');
-    const menu = page.getByRole('listbox');
+    const toggleButton = page.getByRole('combobox');
 
     await expect(toggleButton).toBeVisible();
     // Tab and open the MultiSelect
     await page.keyboard.press('Tab');
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(page.getByRole('combobox', { expanded: true })).toBeVisible;
-    await expect(menu).toBeFocused();
 
     await expect(page).toHaveNoACViolations('MultiSelect-open');
   });
@@ -89,9 +85,8 @@ test.describe('MultiSelect @avt', () => {
         theme: 'white',
       },
     });
-    const toggleButton = page.getByRole('button', {
+    const toggleButton = page.getByRole('combobox', {
       expanded: false,
-      name: 'Multiselect Label',
     });
     const selection = page.getByRole('button', {
       name: 'Clear all selected items',
@@ -127,7 +122,14 @@ test.describe('MultiSelect @avt', () => {
     ).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
     );
-    // select first option (should only select with space bar)
+    // select first option (should select with enter and space)
+    await page.keyboard.press('Enter');
+    await expect(
+      page.getByRole('option', {
+        name: 'An example option that is really long to show what should be done to handle long text',
+        selected: true,
+      })
+    ).toBeVisible();
     await page.keyboard.press('Enter');
     await expect(
       page.getByRole('option', {