Merge branch 'main' into 13888-modal-hidden

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

@@ -0,0 +1,141 @@
+/**
+ * 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('ProgressIndicator', () => {
+  test('accessibility-checker @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressIndicator');
+  });
+
+  test('accessibility-checker interactive progressindicator @avt', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--interactive',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressIndicator-interactive');
+  });
+
+  test('accessibility-checker skeleton progressindicator @avt', async ({
+    page,
+  }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--skeleton',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ProgressIndicator-skeleton');
+  });
+
+  test('accessibility-checker - onHover @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page.getByText('First step')).toBeVisible();
+
+    page.getByText('First step').hover();
+
+    await expect(page).toHaveNoACViolations('ProgressIndicator-onhover');
+  });
+
+  test('accessibility-checker - complete @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Checking if the 'complete' prop is adding the correct class
+    expect(page.locator('.cds--progress-step--complete')).toBeTruthy();
+  });
+
+  test('accessibility-checker - current @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    // Checking if the 'current' prop is adding the correct class
+    expect(page.locator('.cds--progress-step--current')).toBeTruthy();
+  });
+
+  test('accessibility-checker - interactive onHover @avt', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--interactive',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page.getByText('Click me')).toBeVisible();
+
+    page.getByText('Click me').hover();
+
+    await expect(page).toHaveNoACViolations(
+      'ProgressIndicator-interactive-onhover'
+    );
+  });
+
+  test('progress indicator - keyboard nav', async ({ page }) => {
+    await visitStory(page, {
+      component: 'ProgressIndicator',
+      id: 'components-progressindicator--interactive',
+      globals: {
+        theme: 'white',
+      },
+    });
+    // Testing the first element interaction
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'Click me' })).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button', { name: 'Click me' })).toBeFocused();
+
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Escape');
+
+    // Testing the third element interaction
+    await page.keyboard.press('Tab');
+    await expect(
+      page.getByRole('button', { name: 'Third step' })
+    ).toBeFocused();
+
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Escape');
+
+    await expect(
+      page.getByRole('button', { name: 'Third step' })
+    ).toBeFocused();
+  });
+});

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

packages/react/examples/custom-css-prefix/yarn.lock

@@ -4175,4 +4175,4 @@ yargs@^12.0.2:
     string-width "^2.0.0"
     which-module "^2.0.0"
     y18n "^3.2.1 || ^4.0.0"
-    yargs-parser "^11.1.1"
+    yargs-parser "^11.1.1"

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -484,6 +484,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
         >
           <div
             class="cds--search-magnifier"
+            tabindex="-1"
           >
             <svg
               aria-hidden="true"
@@ -514,7 +515,6 @@ exports[`DataTable behaves as expected selection should render and match snapsho
             id="custom-id"
             placeholder="Filter table"
             role="searchbox"
-            tabindex="0"
             type="text"
             value=""
           />
@@ -890,6 +890,7 @@ exports[`DataTable renders as expected - Component API should render and match s
         >
           <div
             class="cds--search-magnifier"
+            tabindex="-1"
           >
             <svg
               aria-hidden="true"
@@ -920,7 +921,6 @@ exports[`DataTable renders as expected - Component API should render and match s
             id="custom-id"
             placeholder="Filter table"
             role="searchbox"
-            tabindex="0"
             type="text"
             value=""
           />

packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap

@@ -9,6 +9,7 @@ exports[`TableToolbarSearch renders as expected - Component API should render 1`
   >
     <div
       class="cds--search-magnifier"
+      tabindex="-1"
     >
       <svg
         aria-hidden="true"
@@ -39,7 +40,6 @@ exports[`TableToolbarSearch renders as expected - Component API should render 1`
       id="custom-id"
       placeholder="Filter table"
       role="searchbox"
-      tabindex="0"
       type="text"
       value=""
     />

packages/react/src/components/ExpandableSearch/ExpandableSearch-test.js

@@ -58,6 +58,30 @@ describe('ExpandableSearch', () => {
       expect(container.firstChild).toHaveClass(`${prefix}--search--expanded`);
     });
 
+    it('expands on enter', async () => {
+      const { container } = render(
+        <ExpandableSearch labelText="test-search" />
+      );
+
+      await screen.getAllByRole('button')[0].focus();
+
+      await userEvent.keyboard('[Enter]');
+
+      expect(container.firstChild).toHaveClass(`${prefix}--search--expanded`);
+    });
+
+    it('expands on space', async () => {
+      const { container } = render(
+        <ExpandableSearch labelText="test-search" />
+      );
+
+      await screen.getAllByRole('button')[0].focus();
+
+      await userEvent.keyboard('[Space]');
+
+      expect(container.firstChild).toHaveClass(`${prefix}--search--expanded`);
+    });
+
     it('places focus on the input after expansion', async () => {
       render(<ExpandableSearch labelText="test-search" />);
 
@@ -107,5 +131,31 @@ describe('ExpandableSearch', () => {
 
       expect(container.firstChild).toHaveClass(`${prefix}--search--expanded`);
     });
+
+    it('closes and clears value on escape', async () => {
+      const { container } = render(
+        <ExpandableSearch labelText="test-search" />
+      );
+
+      await userEvent.click(screen.getAllByRole('button')[0]);
+
+      expect(container.firstChild).toHaveClass(`${prefix}--search--expanded`);
+
+      await userEvent.type(screen.getByRole('searchbox'), 'test-value');
+
+      expect(screen.getByRole('searchbox')).toHaveValue('test-value');
+
+      await userEvent.keyboard('[Escape]');
+
+      expect(screen.getByRole('searchbox')).not.toHaveValue('test-value');
+
+      expect(container.firstChild).toHaveClass(`${prefix}--search--expanded`);
+
+      await userEvent.keyboard('[Escape]');
+
+      expect(container.firstChild).not.toHaveClass(
+        `${prefix}--search--expanded`
+      );
+    });
   });
 });

packages/react/src/components/ExpandableSearch/ExpandableSearch.tsx

@@ -10,12 +10,13 @@ import classnames from 'classnames';
 import Search, { type SearchProps } from '../Search';
 import { usePrefix } from '../../internal/usePrefix';
 import { composeEventHandlers } from '../../tools/events';
+import { match, keys } from '../../internal/keyboard';
 
 function ExpandableSearch({
   onBlur,
   onChange,
   onExpand,
-  onFocus,
+  onKeyDown,
   defaultValue,
   isExpanded,
   ...props
@@ -25,12 +26,6 @@ function ExpandableSearch({
   const searchRef = useRef<HTMLInputElement>(null);
   const prefix = usePrefix();
 
-  function handleFocus() {
-    if (!expanded) {
-      setExpanded(true);
-    }
-  }
-
   function handleBlur(evt) {
     const relatedTargetIsAllowed =
       evt.relatedTarget &&
@@ -46,9 +41,21 @@ function ExpandableSearch({
   }
 
   function handleExpand() {
+    setExpanded(true);
     searchRef.current?.focus?.();
   }
 
+  function handleKeyDown(evt) {
+    if (expanded && match(evt, keys.Escape)) {
+      evt.stopPropagation();
+
+      // escape key only clears if the input is empty, otherwise it clears the input
+      if (!evt.target?.value) {
+        setExpanded(false);
+      }
+    }
+  }
+
   const classes = classnames(
     `${prefix}--search--expandable`,
     {
@@ -64,10 +71,10 @@ function ExpandableSearch({
       isExpanded={expanded}
       ref={searchRef}
       className={classes}
-      onFocus={composeEventHandlers([onFocus, handleFocus])}
       onBlur={composeEventHandlers([onBlur, handleBlur])}
       onChange={composeEventHandlers([onChange, handleChange])}
       onExpand={composeEventHandlers([onExpand, handleExpand])}
+      onKeyDown={composeEventHandlers([onKeyDown, handleKeyDown])}
     />
   );
 }