Merge branch 'main' into 14326-avt-structured-list

.github/workflows/contribution-approved.yml

@@ -0,0 +1,32 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning
+name: Add comment on Enhancement Label
+on:
+  issues:
+    types:
+      - labeled
+jobs:
+  add-comment:
+    ## TODO: figure out how to escape colons for labels
+    # if: github.event.label.name == "proposal: accepted" && github.event.label.name == "community contribution"
+    if: "${{ contains(github.event.label, 'proposal: accepted') && contains(github.event.label, 'communit contribution') }}"
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Add comment
+        uses: actions/github-script@d7906e4ad0b1822421a7e6a35d5ca353c962f410 #v6.4.1
+        with:
+          script: |
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: 'The Carbon team has accepted this proposal! Our team doesn’t have the cycles to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!'
+            })

.github/workflows/label-actions.yml

@@ -0,0 +1,29 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning
+name: Add comment on Enhancement Label
+on:
+  issues:
+    types:
+      - labeled
+jobs:
+  add-comment:
+    if: github.event.label.name == 'enhancement' 
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Add comment
+        uses: peter-evans/create-or-update-comment@5f728c3dae25f329afbe34ee4d08eef25569d79f
+        with:
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Thank you for submitting a feature request. Here's what to expect next. 
+            Your proposal is open and is now being [triaged](https://github.com/orgs/carbon-design-system/projects/51/views/1) by the Carbon team. 
+            If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request volunteers from the community. 
+            Read the full triaging workflow [here](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/support.md#type-enhancement-).

config/eslint-config-carbon/package.json

@@ -38,7 +38,7 @@
     "@typescript-eslint/parser": "^5.59.6",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^27.0.0",
     "eslint-plugin-jest-dom": "^5.0.0",

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

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

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

@@ -0,0 +1,57 @@
+/**
+ * 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('ProgressBar @avt', () => {
+  test('accessibility-checker ProgressBar', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressBar',
+      id: 'components-progressbar--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressBar');
+  });
+
+  test('accessibility-checker ProgressBar indeterminate', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressBar',
+      id: 'components-progressbar--indeterminate',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressBar indeterminate');
+  });
+
+  test('accessibility-checker ProgressBar example', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressBar',
+      id: 'components-progressbar--example',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressBar example');
+  });
+
+  test('accessibility-checker ProgressBar layer', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressBar',
+      id: 'components-progressbar--with-layer',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressBar layer');
+  });
+});

e2e/components/ProgressBar/ProgressBar-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('ProgressBar', () => {
   themes.forEach((theme) => {
@@ -39,15 +39,4 @@ test.describe('ProgressBar', () => {
       });
     });
   });
-
-  test('accessibility-checker @avt', async ({ page }) => {
-    await visitStory(page, {
-      component: 'ProgressBar',
-      id: 'components-progressbar--default',
-      globals: {
-        theme: 'white',
-      },
-    });
-    await expect(page).toHaveNoACViolations('ProgressBar');
-  });
 });