fix(web-components): #4280 add toggle button tooltips

packages/react/src/component-tests/IcToggleButton/IcToggleButton.cy.tsx

@@ -454,3 +454,42 @@ describe("IcToggleButton visual regression tests in high contrast mode", () => {
     });
   });
 });
+
+describe("IcToggleButton tooltip visual regression", () => {
+  beforeEach(() => {
+    cy.injectAxe();
+  });
+
+  afterEach(() => {
+    cy.task("generateReport");
+  });
+
+  it("should render a tooltip on a default toggle button", () => {
+    mount(
+      <div style={{ padding: "100px 8px" }}>
+        <IcToggleButton
+          label="Toggle"
+          title="Toggle help"
+          tooltipPlacement="top"
+        />
+      </div>
+    );
+
+    cy.checkHydrated(IC_TOGGLE_BUTTON_SELECTOR);
+    cy.get(IC_TOGGLE_BUTTON_SELECTOR).should("not.have.attr", "title");
+
+    cy.findShadowEl(IC_TOGGLE_BUTTON_SELECTOR, "ic-button")
+      .shadow()
+      .find("ic-tooltip")
+      .trigger("mouseenter")
+      .shadow()
+      .find(".ic-tooltip-container")
+      .should("be.visible");
+
+    cy.checkA11yWithWait(undefined, undefined, TOGGLE_BUTTON_AXE_OPTIONS);
+    cy.compareSnapshot({
+      name: "/default-with-tooltip",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.032),
+    });
+  });
+});

packages/web-components/src/components/ic-toggle-button/ic-toggle-button.tsx

@@ -10,6 +10,7 @@ import {
   Watch,
 } from "@stencil/core";
 import {
+  inheritAttributes,
   isSlotUsed,
   onComponentRequiredPropUndefined,
   removeDisabledFalse,
@@ -47,6 +48,8 @@ const TRACKED_ATTRIBUTES = [
   },
 })
 export class ToggleButton {
+  private title = "";
+
   @Element() el: HTMLIcToggleButtonElement;
 
   /**
@@ -127,6 +130,8 @@ export class ToggleButton {
   }>;
 
   componentWillLoad(): void {
+    const { title } = inheritAttributes(this.el, ["title"]);
+    this.title = title;
     this.syncPropsFromToggleButtonGroup();
   }
 
@@ -230,6 +235,7 @@ export class ToggleButton {
       outline,
       size,
       theme,
+      title,
       tooltipPlacement,
       variant,
     } = this;
@@ -255,7 +261,7 @@ export class ToggleButton {
           aria-pressed={`${checked}`}
           variant={iconVariant ? "icon-tertiary" : "secondary"}
           onClick={this.handleClick}
-          title={accessibleLabel}
+          title={title || accessibleLabel}
           aria-label={`${accessibleLabel ? accessibleLabel : label}, ${
             checked ? "ticked" : "unticked"
           }`}

packages/web-components/src/components/ic-toggle-button/test/basic/ic-toggle-button.spec.ts

@@ -1,5 +1,7 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { ToggleButton } from "../../ic-toggle-button";
+import { Button } from "../../../ic-button/ic-button";
+import { Tooltip } from "../../../ic-tooltip/ic-tooltip";
 
 describe("ic-toggle-button component", () => {
   it("should render", async () => {
@@ -155,3 +157,38 @@ describe("ic-toggle-button component", () => {
     expect(window.alert).not.toHaveBeenCalled;
   });
 });
+
+describe("ic-toggle-button tooltip", () => {
+  it("should render the standard tooltip for a non-icon toggle button with title", async () => {
+    const page = await newSpecPage({
+      components: [ToggleButton, Button, Tooltip],
+      html: `<ic-toggle-button label="Toggle" title="Toggle help" tooltip-placement="top"></ic-toggle-button>`,
+    });
+
+    expect(page.root?.hasAttribute("title")).toBe(false);
+
+    const button = page.root?.shadowRoot?.querySelector("ic-button");
+    const tooltip = button?.shadowRoot?.querySelector(
+      "ic-tooltip"
+    ) as HTMLIcTooltipElement;
+
+    expect(tooltip).not.toBeNull();
+    expect(tooltip.label).toBe("Toggle help");
+    expect(tooltip.placement).toBe("top");
+  });
+
+  it("should keep the accessible label as the icon variant tooltip fallback", async () => {
+    const page = await newSpecPage({
+      components: [ToggleButton, Button, Tooltip],
+      html: `<ic-toggle-button variant="icon" accessible-label="Refresh the page"></ic-toggle-button>`,
+    });
+
+    const button = page.root?.shadowRoot?.querySelector("ic-button");
+    const tooltip = button?.shadowRoot?.querySelector(
+      "ic-tooltip"
+    ) as HTMLIcTooltipElement;
+
+    expect(tooltip).not.toBeNull();
+    expect(tooltip.label).toBe("Refresh the page");
+  });
+});