Merge branch 'main' into 12520-table-batch-actions-type

.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

.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

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": {
@@ -33,7 +33,7 @@
     "chalk": "^4.1.1",
     "jest-circus": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
-    "jest-watch-typeahead": "^1.1.0",
+    "jest-watch-typeahead": "^2.0.0",
     "sass": "^1.51.0"
   },
   "devDependencies": {

docs/release-schedule.md

@@ -50,7 +50,8 @@ Maintenance, consuming projects should begin migrating to the new Active major
 version.  During Maintenance we also consider adding non-critical bug fixes on
 an ad hoc basis, by request only. To request a fix be back-ported to a
 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+).
+[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.
 
 ## Assets managed under this release schedule
 

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
 
@@ -165,7 +162,7 @@ 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)
+      [gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon)
       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.
 

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

@@ -0,0 +1,118 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('ComboBox @avt', () => {
+  test('accessibility-checker combobox', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ComboBox',
+      id: 'components-combobox--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ComboBox');
+  });
+
+  // Skipping now due to AVT violation, possible false positive
+  test.skip('accessibility-checker open combobox', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ComboBox',
+      id: 'components-combobox--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const combobox = page.getByRole('combobox');
+
+    await expect(combobox).toBeVisible();
+    // Tab and open the ComboBox
+    await page.keyboard.press('Tab');
+    await expect(combobox).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(page.getByRole('combobox', { expanded: true })).toBeVisible;
+    await expect(combobox).toBeFocused();
+
+    await expect(page).toHaveNoACViolations('ComboBox-open');
+  });
+
+  test('combobox - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ComboBox',
+      id: 'components-combobox--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const combobox = page.getByRole('combobox');
+    const menu = page.getByRole('listbox');
+    const clearButton = page.getByRole('button', {
+      name: 'Clear selected item',
+    });
+    const optionOne = page.getByRole('option', {
+      name: 'An example option that is really long to show what should be done to handle long text',
+    });
+    const optionTwo = page.getByRole('option', {
+      name: 'Option 2',
+    });
+
+    await expect(combobox).toBeVisible();
+    await expect(clearButton).not.toBeVisible();
+    // Tab and open the ComboBox with Arrow Down
+    await page.keyboard.press('Tab');
+    await expect(combobox).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(menu).toBeVisible();
+    // Close with Escape, retain focus, and open with Spacebar
+    await page.keyboard.press('Escape');
+    await expect(menu).not.toBeVisible();
+    await expect(combobox).toBeFocused();
+    await page.keyboard.press('Space');
+    await expect(menu).toBeVisible();
+    // Close and clear with Escape, retain focus, and open with Enter
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('Escape');
+    await expect(menu).not.toBeVisible();
+    await expect(combobox).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(menu).toBeVisible();
+    // Navigation inside the menu
+    // move to first option
+    await page.keyboard.press('ArrowDown');
+    await expect(optionOne).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // select first option (should only select with enter)
+    await page.keyboard.press('Space');
+    await expect(combobox).toHaveValue(' ');
+    await page.keyboard.press('Enter');
+    await expect(combobox).toHaveValue(
+      'An example option that is really long to show what should be done to handle long text'
+    );
+    // focus comes back to the toggle button after selecting
+    await expect(combobox).toBeFocused();
+    await expect(menu).not.toBeVisible();
+    await expect(clearButton).toBeVisible();
+    // should only clear selection when escape is pressed when the menu is closed
+    await page.keyboard.press('Escape');
+    await expect(clearButton).not.toBeVisible();
+    await expect(combobox).toHaveValue('');
+    // should highlight menu items based on text input
+    await page.keyboard.press('2');
+    await expect(menu).toBeVisible();
+    await expect(optionTwo).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // Should select and populate combobox with current filtered item
+    await page.keyboard.press('Enter');
+    await expect(combobox).toHaveValue('Option 2');
+  });
+});

e2e/components/ComboBox/ComboBox-test.e2e.js

@@ -7,9 +7,9 @@
 
 'use strict';
 
-const { expect, test } = require('@playwright/test');
+const { test } = require('@playwright/test');
 const { themes } = require('../../test-utils/env');
-const { snapshotStory, visitStory } = require('../../test-utils/storybook');
+const { snapshotStory } = require('../../test-utils/storybook');
 
 test.describe('ComboBox', () => {
   themes.forEach((theme) => {
@@ -31,15 +31,4 @@ test.describe('ComboBox', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'ComboBox',
-      id: 'components-combobox--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('ComboBox');
-  });
 });

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

@@ -50,7 +50,7 @@ test.describe('DatePicker @avt', () => {
   });
 
   // skipping for now due to accessibility violation
-  test.skip('skeleton state @avt', async ({ page }) => {
+  test('skeleton state @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'DatePicker',
       id: 'components-datepicker--skeleton',
@@ -63,7 +63,7 @@ test.describe('DatePicker @avt', () => {
   });
 
   // skipping for now due to accessibility violation
-  test.skip('open state @avt', async ({ page }) => {
+  test('open state @avt', async ({ page }) => {
     await visitStory(page, {
       component: 'DatePicker',
       id: 'components-datepicker--playground',