feat(20772): added tooltip for expanded search icon (#21034)

* feat(20772): added tooltip for expanded search icon

* feat(20772): fixed the test cases

Author: sunny-kukkar-ibm

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

@@ -115,4 +115,19 @@ test.describe('@avt Search', () => {
     await expect(searchButton).not.toHaveAttribute('aria-expanded', 'true');
     await expect(search).toBeHidden();
   });
+
+  test('@avt-keyboard-nav tooltip on focus', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Search',
+      id: 'components-search--expandable',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await expect(page.getByRole('button')).toBeVisible();
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('button')).toBeFocused();
+    await expect(page.getByRole('tooltip')).toHaveText('Search');
+  });
 });

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

@@ -8,7 +8,7 @@
 import React from 'react';
 import ExpandableSearch from './ExpandableSearch';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 
 const prefix = 'cds';
 
@@ -63,7 +63,12 @@ describe('ExpandableSearch', () => {
         <ExpandableSearch labelText="test-search" />
       );
 
-      await screen.getAllByRole('button')[0].focus();
+      const expandControl = container.querySelector('.cds--search-magnifier');
+      expect(expandControl).not.toBeNull();
+
+      await act(async () => {
+        expandControl.focus();
+      });
 
       await userEvent.keyboard('[Enter]');
 
@@ -75,7 +80,12 @@ describe('ExpandableSearch', () => {
         <ExpandableSearch labelText="test-search" />
       );
 
-      await screen.getAllByRole('button')[0].focus();
+      const expandControl = container.querySelector('.cds--search-magnifier');
+      expect(expandControl).not.toBeNull();
+
+      await act(async () => {
+        expandControl.focus();
+      });
 
       await userEvent.keyboard('[Space]');
 

packages/react/src/components/Search/Search.stories.js

@@ -53,14 +53,16 @@ export const Disabled = () => {
 
 export const Expandable = () => {
   return (
-    <ExpandableSearch
-      size="lg"
-      labelText="Search"
-      closeButtonLabelText="Clear search input"
-      id="search-expandable-1"
-      onChange={() => {}}
-      onKeyDown={() => {}}
-    />
+    <div style={{ marginTop: '50px' }}>
+      <ExpandableSearch
+        size="lg"
+        labelText="Search"
+        closeButtonLabelText="Clear search input"
+        id="search-expandable-1"
+        onChange={() => {}}
+        onKeyDown={() => {}}
+      />
+    </div>
   );
 };
 

packages/react/src/components/Search/Search.tsx

@@ -28,6 +28,7 @@ import { useMergedRefs } from '../../internal/useMergedRefs';
 import { deprecate } from '../../prop-types/deprecate';
 import { FormContext } from '../FluidForm';
 import { noopFn } from '../../internal/noopFn';
+import { Tooltip } from '../Tooltip';
 
 type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
 export interface SearchProps extends InputPropsBase {
@@ -244,29 +245,46 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       }
     }
 
+    const magnifierButton = (
+      <div
+        aria-labelledby={onExpand ? searchId : undefined}
+        role={onExpand ? 'button' : undefined}
+        className={`${prefix}--search-magnifier`}
+        onClick={onExpand}
+        onKeyDown={handleExpandButtonKeyDown}
+        tabIndex={onExpand && !isExpanded ? 0 : -1}
+        ref={expandButtonRef}
+        aria-expanded={
+          onExpand && isExpanded
+            ? true
+            : onExpand && !isExpanded
+              ? false
+              : undefined
+        }
+        aria-controls={onExpand ? uniqueId : undefined}>
+        <CustomSearchIcon icon={renderIcon} />
+      </div>
+    );
+
+    // Wrap magnifierButton in a tooltip if it's expandable
+    const magnifierWithTooltip =
+      onExpand && !isExpanded ? (
+        <Tooltip
+          className={`${prefix}--search-tooltip ${prefix}--search-magnifier-tooltip`}
+          align="top"
+          label="Search">
+          {magnifierButton}
+        </Tooltip>
+      ) : (
+        magnifierButton
+      );
+
     return (
       <div role="search" aria-label={placeholder} className={searchClasses}>
+        {magnifierWithTooltip}
         {/* the magnifier is used in ExpandableSearch as a click target to expand,
       however, it does not need a keyboard event bc the input element gets focus on keyboard nav and expands that way*/}
-        {}
-        <div
-          aria-labelledby={onExpand ? searchId : undefined}
-          role={onExpand ? 'button' : undefined}
-          className={`${prefix}--search-magnifier`}
-          onClick={onExpand}
-          onKeyDown={handleExpandButtonKeyDown}
-          tabIndex={onExpand && !isExpanded ? 0 : -1}
-          ref={expandButtonRef}
-          aria-expanded={
-            onExpand && isExpanded
-              ? true
-              : onExpand && !isExpanded
-                ? false
-                : undefined
-          }
-          aria-controls={onExpand ? uniqueId : undefined}>
-          <CustomSearchIcon icon={renderIcon} />
-        </div>
+
         <label id={searchId} htmlFor={uniqueId} className={`${prefix}--label`}>
           {labelText}
         </label>

packages/styles/scss/components/search/_search.scss

@@ -334,9 +334,7 @@
   .#{$prefix}--search--expandable .#{$prefix}--search-input {
     padding: 0;
     inline-size: 0;
-    transition:
-      padding $duration-fast-01 motion(standard, productive),
-      width 0s linear $duration-fast-01;
+    transition: transform $duration-fast-01 motion(standard, productive);
 
     &::placeholder {
       position: relative;
@@ -389,4 +387,13 @@
   .#{$prefix}--search--expandable.#{$prefix}--search--disabled svg {
     fill: $icon-disabled;
   }
+
+  .#{$prefix}--search-magnifier-tooltip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .#{$prefix}--search-magnifier {
+      position: relative;
+    }
+  }
 }