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

Added custom tooltip to `ActionIcon`
dxc-technology · Jul 16, 2024 · 068a224 · 068a224
2 parents c723cf5 + 906fe61
commit 068a224
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 62 deletions.
diff --git a/apps/website/screens/components/resultset-table/code/examples/paginatorHidden.ts b/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: () => {},
     },
     {

diff --git a/apps/website/screens/components/resultset-table/code/examples/reduced.ts b/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: () => {},
     },
     {

diff --git a/apps/website/screens/components/table/code/examples/actions.ts b/apps/website/screens/components/table/code/examples/actions.ts
@@ -4,7 +4,7 @@ const code = `() => {
   const actions = [
     {
       icon: "delete",
-      title: "icon",
+      title: "Delete",
       onClick: () => {},
     },
     {

diff --git a/packages/lib/src/action-icon/ActionIcon.test.tsx b/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");
   });
 });
diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/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`

diff --git a/packages/lib/src/date-input/DateInput.stories.tsx b/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);
 };
 

diff --git a/packages/lib/src/date-input/DateInput.tsx b/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);

diff --git a/packages/lib/src/number-input/NumberInput.test.tsx b/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;

diff --git a/packages/lib/src/password-input/PasswordInput.test.tsx b/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");

diff --git a/packages/lib/src/status-light/StatusLight.test.tsx b/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");
   });
 });
diff --git a/packages/lib/src/status-light/StatusLight.tsx b/packages/lib/src/status-light/StatusLight.tsx
@@ -4,8 +4,8 @@ import StatusLightPropsType from "./types";
 
 const DxcStatusLight = ({ mode = "default", label, size = "medium" }: StatusLightPropsType): JSX.Element => {
   return (
-    <StatusLightContainer size={size} aria-label={`${mode}: ${label}`} data-testid="status_light-container">
-      <StatusDot mode={mode} size={size} aria-hidden="true" data-testid="status-dot" />
+    <StatusLightContainer size={size} aria-label={`${mode}: ${label}`} role="status">
+      <StatusDot mode={mode} size={size} aria-hidden="true" />
       <StatusLabel mode={mode} size={size}>
         {label}
       </StatusLabel>

diff --git a/packages/lib/src/text-input/TextInput.test.tsx b/packages/lib/src/text-input/TextInput.test.tsx
@@ -210,11 +210,6 @@ describe("TextInput component tests", () => {
     expect(onBlur).toHaveBeenCalledWith({ value: "Blur test" });
   });
 
-  test("Clear action tooltip is correct", () => {
-    const { getByTitle } = render(<DxcTextInput label="Input label" value="Text" clearable />);
-    expect(getByTitle("Clear field")).toBeTruthy();
-  });
-
   test("Clear action onClick cleans the input", async () => {
     const { getByRole } = render(<DxcTextInput label="Input label" clearable />);
     const input = getByRole("textbox") as HTMLInputElement;
@@ -335,7 +330,7 @@ describe("TextInput component tests", () => {
     expect(onClick).not.toHaveBeenCalled();
   });
 
-  test("Action prop: image displayed with title and onClick event", async () => {
+  test("Action prop: image displayed and onClick event", async () => {
     const onClick = jest.fn();
     const action = {
       onClick: onClick,
@@ -354,9 +349,8 @@ describe("TextInput component tests", () => {
       ),
       title: "Search",
     };
-    const { getByRole, getByTestId, getByTitle } = render(<DxcTextInput label="Input label" action={action} />);
+    const { getByRole, getByTestId } = render(<DxcTextInput label="Input label" action={action} />);
     expect(getByTestId("image")).toBeTruthy();
-    expect(getByTitle("Search")).toBeTruthy();
     await userEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });