Merge branch 'main' of github.com:carbon-design-system/carbon into 18277

.github/workflows/codeql-analysis.yml

@@ -24,9 +24,9 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/init@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1
         with:
           languages: javascript
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@48ab28a6f5dbc2a99bf1e0131198dd8f1df78169 # v3.28.0
+        uses: github/codeql-action/analyze@b6a472f63d85b9c78a3ac5e89422239fc15e9b3c # v3.28.1

.yarnrc.yml

@@ -18,4 +18,4 @@ supportedArchitectures:
     - linux
     - win32
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

config/eslint-config-carbon/package.json

@@ -48,7 +48,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-ssr-friendly": "^1.3.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.11.0",
     "eslint-plugin-testing-library": "^6.0.1",
     "eslint-restricted-globals": "^0.2.0"
   },

config/eslint-config-carbon/rules/best-practices.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-export default {
+module.exports = {
   rules: {
     // @see https://eslint.org/docs/rules/curly
     curly: 'error',

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

@@ -57,6 +57,9 @@ test.describe('@avt ComboBox', () => {
     const clearButton = page.getByRole('button', {
       name: 'Clear selected item',
     });
+    const exampleOption = page.getByRole('option', {
+      name: 'An example option that is really long to show what should be done to handle long text',
+    });
     const optionOne = page.getByRole('option', {
       name: 'An example option that is really long to show what should be done to handle long text',
     });
@@ -71,6 +74,11 @@ test.describe('@avt ComboBox', () => {
     await expect(combobox).toBeFocused();
     await page.keyboard.press('ArrowDown');
     await expect(menu).toBeVisible();
+    // Expect focus to be on 1st item in menu after Arrow Down
+    // when there is no initial selected item
+    await expect(exampleOption).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
     // Close with Escape, retain focus, and open with Spacebar
     await page.keyboard.press('Escape');
     await expect(menu).toBeHidden();
@@ -84,6 +92,8 @@ test.describe('@avt ComboBox', () => {
     await expect(combobox).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(menu).toBeVisible();
+    // Expect focus to be retained when no initial selected item after Enter
+    await expect(combobox).toBeFocused();
     await page.keyboard.press('ArrowDown');
     // Navigation inside the menu
     // move to first option
@@ -101,8 +111,14 @@ test.describe('@avt ComboBox', () => {
     await expect(combobox).toBeFocused();
     await expect(menu).toBeHidden();
     await expect(clearButton).toBeVisible();
+    // Expect focus to be on selected item when opening with Arrow Down
+    await page.keyboard.press('ArrowDown');
+    await expect(exampleOption).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
+    );
     // should only clear selection when escape is pressed when the menu is closed
     await page.keyboard.press('Escape');
+    await page.keyboard.press('Escape');
     await expect(clearButton).toBeHidden();
     await expect(combobox).toHaveValue('');
     // should highlight menu items based on text input

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

@@ -62,6 +62,15 @@ test.describe('@avt Dropdown', () => {
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('ArrowDown');
     await expect(menu).toBeVisible();
+    // Expect focus to be on 1st item in menu after Arrow Down
+    // when there is no initial selected item
+    await expect(
+      page.getByRole('option', {
+        name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
     // Close with Escape, retain focus, and open with Space
     await page.keyboard.press('Escape');
     await page.keyboard.press('Space');
@@ -71,6 +80,15 @@ test.describe('@avt Dropdown', () => {
     await expect(menu).toBeHidden();
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
+    // Expect focus to be retained when no initial selected item after Enter
+    await expect(toggleButton).toBeFocused();
+    await expect(menu).toBeVisible();
+    // Select item from menu
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+    // Open with Enter after item has been selected
+    await page.keyboard.press('Enter');
     // Should focus on selected item by default
     await expect(
       page.getByRole('option', {
@@ -79,6 +97,16 @@ test.describe('@avt Dropdown', () => {
     ).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
     );
+    // Should focus on selected item by default on Arrow Down as well
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('ArrowDown');
+    await expect(
+      page.getByRole('option', {
+        name: 'Option 1',
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
+    );
     // Navigation inside the menu
     await page.keyboard.press('ArrowDown');
     await expect(

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

@@ -57,6 +57,9 @@ test.describe('@avt FluidComboBox', () => {
     const clearButton = page.getByRole('button', {
       name: 'Clear selected item',
     });
+    const exampleOption = page.getByRole('option', {
+      name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+    });
     const optionOne = page.getByRole('option', {
       name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
     });
@@ -71,6 +74,11 @@ test.describe('@avt FluidComboBox', () => {
     await expect(combobox).toBeFocused();
     await page.keyboard.press('ArrowDown');
     await expect(menu).toBeVisible();
+    // Expect focus to be on 1st item in menu after Arrow Down
+    // when there is no initial selected item
+    await expect(exampleOption).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
     // Close with Escape, retain focus, and open with Spacebar
     await page.keyboard.press('Escape');
     await expect(menu).toBeHidden();
@@ -84,6 +92,8 @@ test.describe('@avt FluidComboBox', () => {
     await expect(combobox).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(menu).toBeVisible();
+    // Expect focus to be retained when no initial selected item after Enter
+    await expect(combobox).toBeFocused();
     await page.keyboard.press('ArrowDown');
     // Navigation inside the menu
     // move to first option

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

@@ -61,6 +61,15 @@ test.describe('@avt FluidDropdown', () => {
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('ArrowDown');
     await expect(menu).toBeVisible();
+    // Expect focus to be on 1st item in menu after Arrow Down
+    // when there is no initial selected item
+    await expect(
+      page.getByRole('option', {
+        name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
     // Close with Escape, retain focus, and open with Space
     await page.keyboard.press('Escape');
     await page.keyboard.press('Space');
@@ -70,6 +79,16 @@ test.describe('@avt FluidDropdown', () => {
     await expect(menu).toBeHidden();
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
+    // Expect focus to be retained when no initial selected item after Enter
+    await expect(toggleButton).toBeFocused();
+    await expect(menu).toBeVisible();
+    // Select item from menu
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+    // Open with Enter after item has been selected
+    await page.keyboard.press('Enter');
     // Should focus on selected item by default
     await expect(
       page.getByRole('option', {
@@ -78,6 +97,16 @@ test.describe('@avt FluidDropdown', () => {
     ).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
     );
+    // Should focus on selected item by default on Arrow Down as well
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('ArrowDown');
+    await expect(
+      page.getByRole('option', {
+        name: 'Option 2',
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
+    );
     // Navigation inside the menu
     await page.keyboard.press('ArrowDown');
     await expect(

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

@@ -88,6 +88,9 @@ test.describe('@avt MultiSelect', () => {
     const toggleButton = page.getByRole('combobox', {
       expanded: false,
     });
+    const toggleButtonExpanded = page.getByRole('combobox', {
+      expanded: true,
+    });
     const selection = page.getByRole('button', {
       name: 'Clear all selected items',
     });
@@ -100,11 +103,22 @@ test.describe('@avt MultiSelect', () => {
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('ArrowDown');
     await expect(menu).toBeVisible();
+    // Expect focus to be on 1st item in menu after Arrow Down
+    // when there is no initial selected item
+    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'
+    );
     // Close with Escape, retain focus, and open with Enter
     await page.keyboard.press('Escape');
     await expect(menu).toBeHidden();
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
+    // Expect focus to be retained when no initial selected item after Enter
+    await expect(toggleButtonExpanded).toBeFocused();
     await expect(menu).toBeVisible();
     // Close with Escape, retain focus, and open with Spacebar
     await page.keyboard.press('Escape');
@@ -143,7 +157,23 @@ test.describe('@avt MultiSelect', () => {
         name: 'An example option that is really long to show what should be done to handle long text',
         selected: true,
       })
-    ).toBeVisible();
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
+    );
+    // Close with Escape, retain focus, and open with Arrow Down
+    await page.keyboard.press('Escape');
+    await expect(menu).toBeHidden();
+    await expect(toggleButton).toBeFocused();
+    await page.keyboard.press('ArrowDown');
+    // On Arrow Down, selected item should be focused
+    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,
+      })
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--active cds--list-box__menu-item--highlighted'
+    );
     // move to second option
     await page.keyboard.press('ArrowDown');
     await expect(