Merge branch 'main' into 14212-avt-overflowmenu

.all-contributorsrc

@@ -1232,6 +1232,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "haocheng6",
+      "name": "Hao Cheng",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7645930?v=4",
+      "profile": "https://github.com/haocheng6",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

.github/workflows/add-to-merge-queue.yml

@@ -1,19 +1,29 @@
-name: Add To Merge Queue
+name: Merge Queue
 on:
-  pull_request:
+  pull_request_target:
     types: [labeled, opened, reopened]
 
+permissions:
+  pull-requests: write
+  contents: write
+
 jobs:
   add-to-merge-queue:
-    name:
-      Add to Merge Queue if the PR is labelled with any of the automerge labels
+    name: Add to queue when automerge labels are present
     runs-on: ubuntu-latest
-    if:
-      "${{ contains(github.event.issue.labels.*.name, 'status: ready to merge
-      🎉') || contains(github.event.issue.labels.*.name, 'status: enable
-      automerge 🟠')}}"
     steps:
+      - name: Log github event
+        env:
+          $GITHUB_CONTEXT_LABELS:
+            ${{ toJson(github.event.pull_request.labels) }}
+        run: echo "$GITHUB_CONTEXT_LABELS"
       - name: 'Add the PR to the merge queue via the GitHub CLI'
-        run: gh pr merge
+        if:
+          ${{ contains(github.event.pull_request.labels.*.name,
+          format('status{0} ready to merge 🎉', ':')) ||
+          contains(github.event.pull_request.labels.*.name, format('status{0}
+          enable automerge 🟠', ':'))}}
+        run: gh pr merge "$PR_URL"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PR_URL: ${{github.event.pull_request.html_url}}

.nvmrc

@@ -1 +1 @@
-18.16
+18.17

CODEOWNERS

@@ -14,3 +14,6 @@
 # Release team should be notified of Public API changes in the system
 **/PublicAPI-test.js @carbon-design-system/release @carbon-design-system/developers-system
 **/PublicAPI-test.js.snap @carbon-design-system/release @carbon-design-system/developers-system
+
+# Admins should be notified of changes to CI/CD workflows
+/.github/workflows @tay1orjones

README.md

@@ -250,6 +250,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/djragsdale"><img src="https://avatars.githubusercontent.com/u/4396766?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Ragsdale</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=djragsdale" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/haocheng6"><img src="https://avatars.githubusercontent.com/u/7645930?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hao Cheng</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=haocheng6" title="Code">💻</a></td>
   </tr>
 </table>
 

config/eslint-config-carbon/package.json

@@ -43,7 +43,7 @@
     "eslint-plugin-jest-dom": "^5.0.0",
     "eslint-plugin-jsdoc": "^46.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.10",

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

@@ -0,0 +1,267 @@
+/**
+ * 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('MultiSelect @avt', () => {
+  test('accessibility-checker multiselect', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MultiSelect',
+      id: 'components-multiselect--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('MultiSelect');
+  });
+
+  test('accessibility-checker filterable multiselect', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FilterableMultiSelect',
+      id: 'components-multiselect--filterable',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('FilterableMultiSelect');
+  });
+
+  // Skipping now due to AVT violation, possible false positive
+  test.skip('accessibility-checker open filterable multiselect', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'FilterableMultiSelect',
+      id: 'components-multiselect--filterable',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const toggleButton = page.getByRole('button');
+    const menu = page.getByRole('listbox');
+
+    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');
+  });
+
+  // Skipping now due to AVT violation, possible false positive
+  test.skip('accessibility-checker open multiselect', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MultiSelect',
+      id: 'components-multiselect--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const toggleButton = page.getByRole('button');
+    const menu = page.getByRole('listbox');
+
+    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');
+  });
+
+  test('multiselect - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'MultiSelect',
+      id: 'components-multiselect--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const toggleButton = page.getByRole('button', {
+      expanded: false,
+      name: 'Multiselect Label',
+    });
+    const selection = page.getByRole('button', {
+      name: 'Clear all selected items',
+    });
+    const menu = page.getByRole('listbox');
+
+    await expect(toggleButton).toBeVisible();
+    await expect(selection).not.toBeVisible();
+    // Tab and open the MultiSelect with Arrow Down
+    await page.keyboard.press('Tab');
+    await expect(toggleButton).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(menu).toBeVisible();
+    // Close with Escape, retain focus, and open with Enter
+    await page.keyboard.press('Escape');
+    await expect(menu).not.toBeVisible();
+    await expect(toggleButton).toBeFocused();
+    await page.keyboard.press('Enter');
+    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(toggleButton).toBeFocused();
+    await page.keyboard.press('Space');
+    await expect(menu).toBeVisible();
+    // Navigation inside the menu
+    // move to first option
+    await page.keyboard.press('ArrowDown');
+    await expect(
+      page.getByRole('option', {
+        name: 'An example option that is really long to show what should be done to handle long text',
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // select first option (should only select with space bar)
+    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: false,
+      })
+    ).toBeVisible();
+    await page.keyboard.press('Space');
+    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();
+    // move to second option
+    await page.keyboard.press('ArrowDown');
+    await expect(
+      page.getByRole('option', {
+        name: 'Option 1',
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // select second option
+    await page.keyboard.press('Space');
+    await expect(
+      page.getByRole('option', {
+        name: 'Option 1',
+        selected: true,
+      })
+    ).toBeVisible();
+    // focus comes back to the toggle button after closing
+    await page.keyboard.press('Escape');
+    await expect(toggleButton).toBeFocused();
+    // should show count of selected items when closed
+    await expect(menu).not.toBeVisible();
+    await expect(selection).toBeVisible();
+    // should only clear selection when escape is pressed when the menu is closed
+    await page.keyboard.press('Escape');
+    await expect(selection).not.toBeVisible();
+  });
+
+  test('filterable multiselect - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'FilterableMultiSelect',
+      id: 'components-multiselect--filterable',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const toggleButton = page.getByRole('combobox');
+    const selection = page.getByRole('button', {
+      name: 'Clear all selected items',
+    });
+    const menu = page.getByRole('listbox');
+
+    await expect(toggleButton).toBeVisible();
+    await expect(selection).not.toBeVisible();
+    // Tab and open the MultiSelect with Arrow Down
+    await page.keyboard.press('Tab');
+    await expect(toggleButton).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    await expect(menu).toBeVisible();
+    // Close with Escape, retain focus, and open with Enter
+    await page.keyboard.press('Escape');
+    await expect(menu).not.toBeVisible();
+    await expect(toggleButton).toBeFocused();
+    await page.keyboard.press('Enter');
+    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(toggleButton).toBeFocused();
+    await page.keyboard.press('Space');
+    await expect(menu).toBeVisible();
+    // Navigation inside the menu
+    // move to first option
+    await page.keyboard.press('ArrowDown');
+    await expect(
+      page.getByRole('option', {
+        name: 'An example option that is really long to show what should be done to handle long text',
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // select first option (should only select with enter)
+    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();
+    // move to second option
+    await page.keyboard.press('ArrowDown');
+    await expect(
+      page.getByRole('option', {
+        name: 'Option 1',
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
+    // select second option
+    await page.keyboard.press('Enter');
+    await expect(
+      page.getByRole('option', {
+        name: 'Option 1',
+        selected: true,
+      })
+    ).toBeVisible();
+    // focus comes back to the toggle button after closing
+    await page.keyboard.press('Escape');
+    await expect(toggleButton).toBeFocused();
+    // should show count of selected items when closed
+    await expect(menu).not.toBeVisible();
+    await expect(selection).toBeVisible();
+    // should only clear selection when escape is pressed when the menu is closed
+    await page.keyboard.press('Escape');
+    await expect(selection).not.toBeVisible();
+
+    // should filter menu items based on text input
+    await page.keyboard.press('2');
+    await expect(menu).toBeVisible();
+    await expect(
+      page.getByRole('option', {
+        name: 'Option 2',
+        selected: false,
+      })
+    ).toBeVisible();
+    await expect(
+      page.getByRole('option', {
+        name: 'Option 1',
+        selected: false,
+      })
+    ).not.toBeVisible();
+  });
+});