Merge pull request #1978 from dxc-technology/Mil4n0r/tooltip-actionicon

Added custom tooltip to `ActionIcon`

Author: Jialecl

apps/website/screens/components/resultset-table/code/examples/paginatorHidden.ts

@@ -11,7 +11,7 @@ const code = `() => {
   const actions = [
     {
       icon: "filled_delete",
-      title: "icon",
+      title: "Delete",
       onClick: () => {},
     },
     {

apps/website/screens/components/resultset-table/code/examples/reduced.ts

@@ -11,7 +11,7 @@ const code = `() => {
   const actions = [
     {
       icon: "delete",
-      title: "icon",
+      title: "Delete",
       onClick: () => {},
     },
     {

apps/website/screens/components/table/code/examples/actions.ts

@@ -4,7 +4,7 @@ const code = `() => {
   const actions = [
     {
       icon: "delete",
-      title: "icon",
+      title: "Delete",
       onClick: () => {},
     },
     {

packages/lib/src/action-icon/ActionIcon.test.tsx

@@ -8,23 +8,18 @@ const iconSVG = (
   </svg>
 );
 describe("Action icon component tests", () => {
-  test("Action icon renders with correct text", () => {
-    const { getByTitle } = render(<DxcActionIcon icon={iconSVG} title="favourite" />);
-    expect(getByTitle("favourite")).toBeTruthy();
-  });
-
   test("Calls correct function on click", () => {
     const onClick = jest.fn();
-    const { getByTitle } = render(<DxcActionIcon icon={iconSVG} title="favourite" onClick={onClick} />);
-    const action = getByTitle("favourite");
+    const { getByRole } = render(<DxcActionIcon icon={iconSVG} title="favourite" onClick={onClick} />);
+    const action = getByRole("button");
     fireEvent.click(action);
     expect(onClick).toHaveBeenCalled();
   });
 
   test("On click is not called when disabled", () => {
     const onClick = jest.fn();
-    const { getByTitle } = render(<DxcActionIcon disabled icon={iconSVG} title="favourite" onClick={onClick} />);
-    const action = getByTitle("favourite");
+    const { getByRole } = render(<DxcActionIcon disabled icon={iconSVG} title="favourite" onClick={onClick} />);
+    const action = getByRole("button");
     fireEvent.click(action);
     expect(onClick).toHaveBeenCalledTimes(0);
   });
@@ -34,7 +29,6 @@ describe("Action icon component tests", () => {
 
     const button = getByRole("button");
     expect(button.getAttribute("aria-label")).toBe("favourite");
-    expect(button.getAttribute("title")).toBe("favourite");
     expect(button.getAttribute("tabindex")).toBe("1");
   });
 });

packages/lib/src/action-icon/ActionIcon.tsx

@@ -3,24 +3,28 @@ import ActionIconPropsTypes, { RefType } from "./types";
 import styled from "styled-components";
 import CoreTokens from "../common/coreTokens";
 import DxcIcon from "../icon/Icon";
+import DxcTooltip from "../tooltip/Tooltip";
 
 const DxcActionIcon = forwardRef<RefType, ActionIconPropsTypes>(
-  ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => (
-    <ActionIcon
-      aria-label={title}
-      disabled={disabled}
-      onClick={onClick}
-      onMouseDown={(event) => {
-        event.stopPropagation();
-      }}
-      tabIndex={tabIndex}
-      title={title}
-      type="button"
-      ref={ref}
-    >
-      {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
-    </ActionIcon>
-  )
+  ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => {
+    return (
+      <DxcTooltip label={title}>
+        <ActionIcon
+          aria-label={title}
+          disabled={disabled}
+          onClick={onClick}
+          onMouseDown={(event) => {
+            event.stopPropagation();
+          }}
+          tabIndex={tabIndex}
+          type="button"
+          ref={ref}
+        >
+          {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}
+        </ActionIcon>
+      </DxcTooltip>
+    );
+  }
 );
 
 const ActionIcon = styled.button`

packages/lib/src/date-input/DateInput.stories.tsx

@@ -230,7 +230,7 @@ const DatePickerButtonStates = () => {
 export const DatePickerStates = DatePickerButtonStates.bind({});
 DatePickerStates.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const dateBtn = canvas.getAllByTitle("Select date")[0];
+  const dateBtn = canvas.getAllByRole("combobox")[0];
   await userEvent.click(dateBtn);
 };
 

packages/lib/src/date-input/DateInput.tsx

@@ -174,7 +174,7 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
 
     useEffect(() => {
       if (!disabled) {
-        const actionButtonRef = dateRef?.current.querySelector("[title='Select date']");
+        const actionButtonRef = dateRef?.current.querySelector("[aria-label='Select date']");
         actionButtonRef?.setAttribute("aria-haspopup", true);
         actionButtonRef?.setAttribute("role", "combobox");
         actionButtonRef?.setAttribute("aria-expanded", isOpen);

packages/lib/src/number-input/NumberInput.test.tsx

@@ -25,12 +25,6 @@ describe("Number input component tests", () => {
     expect(queryAllByRole("button").length).toBe(2);
   });
 
-  test("Number input buttons' tooltip is correct", () => {
-    const { getByTitle } = render(<DxcNumberInput label="Number label" />);
-    expect(getByTitle("Decrement value")).toBeTruthy();
-    expect(getByTitle("Increment value")).toBeTruthy();
-  });
-
   test("Number input is disabled", () => {
     const { getByLabelText } = render(<DxcNumberInput label="Number label" disabled />);
     const number = getByLabelText("Number label") as HTMLInputElement;

packages/lib/src/password-input/PasswordInput.test.tsx

@@ -74,17 +74,6 @@ describe("Password input component tests", () => {
     expect(passwordInput.type).toBe("text");
   });
 
-  test("Password tooltip is correct", async () => {
-    const { getAllByRole, getByTitle, queryByTitle } = render(
-      <DxcPasswordInput label="Password input" clearable value="Password" />
-    );
-    const showButton = getAllByRole("button")[1];
-    userEvent.hover(showButton);
-    expect(getByTitle("Show password")).toBeTruthy();
-    userEvent.unhover(showButton);
-    expect(queryByTitle("Hide password")).toBeFalsy();
-  });
-
   test("Password input has correct accessibility attributes", async () => {
     const { getByRole, getByLabelText } = render(<DxcPasswordInput label="Password input" />);
     const showButton = getByRole("button");

packages/lib/src/status-light/StatusLight.test.tsx

@@ -8,10 +8,8 @@ describe("StatusLight component tests", () => {
   });
 
   test("StatusLight applies accessibility attributes", () => {
-    const { getByTestId } = render(<DxcStatusLight label="Status Light Test" />);
-    const statusLightContainer = getByTestId("status_light-container");
-    const statusDot = getByTestId("status-dot");
+    const { getByRole } = render(<DxcStatusLight label="Status Light Test" />);
+    const statusLightContainer = getByRole("status");
     expect(statusLightContainer.getAttribute("aria-label")).toBe("default: Status Light Test");
-    expect(statusDot.getAttribute("aria-hidden")).toBe("true");
   });
 });