test(web): enhance ShortcutTip tests for hover functionality

- Update tests for ShortcutTip to verify shortcut visibility on hover and hiding on mouse leave.
- Utilize userEvent for simulating user interactions in tests.
- Ensure shortcuts are not visible initially and appear correctly when hovering over buttons.

Author: tyler-dane

packages/web/src/views/Day/components/Shortcuts/components/ShortcutTip.test.tsx

@@ -1,5 +1,6 @@
 import "@testing-library/jest-dom";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { ShortcutTip } from "./ShortcutTip";
 
 describe("ShortcutTip", () => {
@@ -40,37 +41,68 @@ describe("ShortcutTip", () => {
     expect(shortcutElement).toBeInTheDocument();
   });
 
-  it("wraps child components with shortcut", () => {
+  it("wraps child components and shows shortcut on hover", async () => {
+    const user = userEvent.setup();
     render(
       <ShortcutTip shortcut="C">
         <button>Some Button</button>
       </ShortcutTip>,
     );
+
     const button = screen.getByText("Some Button");
     expect(button).toBeInTheDocument();
-    const shortcutElement = screen.getByText("C");
-    expect(shortcutElement).toBeInTheDocument();
+
+    // Shortcut should not be visible initially
+    expect(screen.queryByText("C")).not.toBeInTheDocument();
+
+    // Hover over button to show shortcut
+    await user.hover(button);
+    await waitFor(() => {
+      expect(screen.getByText("C")).toBeInTheDocument();
+    });
   });
 
-  it("renders wrapped component with array shortcut", () => {
+  it("renders wrapped component with array shortcut on hover", async () => {
+    const user = userEvent.setup();
     render(
       <ShortcutTip shortcut={["Cmd", "K"]}>
         <button>Quick Action</button>
       </ShortcutTip>,
     );
+
     const button = screen.getByText("Quick Action");
     expect(button).toBeInTheDocument();
-    const shortcutElement = screen.getByText("Cmd + K");
-    expect(shortcutElement).toBeInTheDocument();
+
+    // Shortcut should not be visible initially
+    expect(screen.queryByText("Cmd + K")).not.toBeInTheDocument();
+
+    // Hover over button to show shortcut
+    await user.hover(button);
+    await waitFor(() => {
+      expect(screen.getByText("Cmd + K")).toBeInTheDocument();
+    });
   });
 
-  it("applies flex layout when wrapping children", () => {
+  it("hides shortcut when mouse leaves", async () => {
+    const user = userEvent.setup();
     render(
       <ShortcutTip shortcut="C">
         <button>Test Button</button>
       </ShortcutTip>,
     );
-    const wrapper = screen.getByText("Test Button").parentElement;
-    expect(wrapper).toHaveClass("flex", "items-center", "gap-2");
+
+    const button = screen.getByText("Test Button");
+
+    // Hover to show shortcut
+    await user.hover(button);
+    await waitFor(() => {
+      expect(screen.getByText("C")).toBeInTheDocument();
+    });
+
+    // Move mouse away to hide shortcut
+    await user.unhover(button);
+    await waitFor(() => {
+      expect(screen.queryByText("C")).not.toBeInTheDocument();
+    });
   });
 });

packages/web/src/views/Day/components/Shortcuts/components/ShortcutTip.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 
 interface ShortcutProps {
   shortcut: string | string[];
@@ -34,11 +34,25 @@ export const ShortcutTip = ({
   children,
   "aria-label": ariaLabel,
 }: ShortcutTipProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
   if (children) {
     return (
-      <div className="flex items-center gap-2">
-        {children}
-        <Shortcut shortcut={shortcut} aria-label={ariaLabel} />
+      <div className="relative inline-block">
+        <div
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          {children}
+        </div>
+        {isHovered && (
+          <div className="absolute bottom-full left-1/2 z-50 mb-2 -translate-x-1/2 transform">
+            <div className="rounded border border-gray-600 bg-gray-800 px-2 py-1 shadow-lg">
+              <Shortcut shortcut={shortcut} aria-label={ariaLabel} />
+            </div>
+            <div className="absolute top-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-t-4 border-r-4 border-l-4 border-transparent border-t-gray-600"></div>
+          </div>
+        )}
       </div>
     );
   }

packages/web/src/views/Day/components/Task/Task.test.tsx

@@ -1,19 +1,9 @@
+import { act } from "react";
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { Task as TaskType } from "../../task.types";
-import { Task } from "./Task";
-
-// Mock the getMetaKey utility
-jest.mock("@web/common/utils/shortcut/shortcut.util", () => ({
-  getMetaKey: jest.fn(() => <span data-testid="meta-key">⌘</span>),
-}));
-
-// Mock TooltipWrapper
-jest.mock("@web/components/Tooltip/TooltipWrapper", () => ({
-  TooltipWrapper: ({ children, onClick }: any) => (
-    <div onClick={onClick}>{children}</div>
-  ),
-}));
+import { Task, TaskProps } from "./Task";
 
 describe("Task - migration", () => {
   const mockTask: TaskType = {
@@ -23,7 +13,7 @@ describe("Task - migration", () => {
     createdAt: "2025-10-27T10:00:00Z",
   };
 
-  const mockProps = {
+  const mockProps: TaskProps = {
     task: mockTask,
     index: 0,
     title: "Test Task",
@@ -70,3 +60,96 @@ describe("Task - migration", () => {
     expect(mockProps.onMigrate).toHaveBeenCalledWith(mockTask.id, "backward");
   });
 });
+
+describe("Task - migration icon visibility on focus", () => {
+  const mockTask: TaskType = {
+    id: "task-1",
+    title: "Test Task",
+    status: "todo",
+    createdAt: "2025-10-27T10:00:00Z",
+  };
+
+  const mockProps: TaskProps = {
+    task: mockTask,
+    index: 0,
+    title: "Test Task",
+    isEditing: false,
+    onCheckboxKeyDown: jest.fn(),
+    onInputBlur: jest.fn(),
+    onInputClick: jest.fn(),
+    onInputKeyDown: jest.fn(),
+    onStatusToggle: jest.fn(),
+    onTitleChange: jest.fn(),
+    onFocus: jest.fn(),
+    onMigrate: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("shows migration icons when checkbox button is focused", async () => {
+    const { container } = render(<Task {...mockProps} />);
+
+    const checkbox = screen.getByRole("checkbox", {
+      name: /toggle test task/i,
+    });
+    const migrationContainer = container.querySelector(".ml-auto");
+
+    // Initially hidden
+    expect(migrationContainer).toHaveClass("opacity-0");
+
+    // Focus on checkbox
+    await act(() => checkbox.focus());
+
+    // Migration buttons should be visible via group-focus-within
+    const forwardButton = screen.getByLabelText("Move task to next day");
+    const backwardButton = screen.getByLabelText("Move task to previous day");
+
+    expect(forwardButton).toBeVisible();
+    expect(backwardButton).toBeVisible();
+  });
+
+  it("shows migration icons when input is focused via click", async () => {
+    const { container } = render(<Task {...mockProps} isEditing={true} />);
+
+    const input = screen.getByRole("textbox", { name: /edit test task/i });
+    const migrationContainer = container.querySelector(".ml-auto");
+
+    // Initially hidden
+    expect(migrationContainer).toHaveClass("opacity-0");
+
+    // Focus on input
+    await act(() => input.focus());
+
+    // Migration buttons should be visible
+    const forwardButton = screen.getByLabelText("Move task to next day");
+    const backwardButton = screen.getByLabelText("Move task to previous day");
+
+    expect(forwardButton).toBeVisible();
+    expect(backwardButton).toBeVisible();
+  });
+
+  it("shows migration icons when tabbing from checkbox to input", async () => {
+    const user = userEvent.setup();
+    render(<Task {...mockProps} />);
+
+    const checkbox = screen.getByRole("checkbox", {
+      name: /toggle test task/i,
+    });
+
+    // Focus checkbox first
+    await act(() => checkbox.focus());
+
+    // Verify icons are visible
+    let forwardButton = screen.getByLabelText("Move task to next day");
+    expect(forwardButton).toBeVisible();
+
+    // Tab to next focusable element (should be one of the migration buttons or input)
+    await user.tab();
+
+    // Icons should still be visible as focus is within the task row
+    forwardButton = screen.getByLabelText("Move task to next day");
+    expect(forwardButton).toBeVisible();
+  });
+});

packages/web/src/views/Day/components/Task/Task.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 import { DATA_TASK_ELEMENT_ID } from "@web/common/constants/web.constants";
-import { getMetaKey } from "@web/common/utils/shortcut/shortcut.util";
 import { Task as TaskType } from "../../task.types";
 import { ChevronLeftIcon } from "../Icons/ChevronLeftIcon";
 import { ChevronRightIcon } from "../Icons/ChevronRightIcon";
 import { TaskCircleIcon } from "../Icons/TaskCircleIcon";
-import { ShortcutTip } from "../Shortcuts/components/ShortcutTip";
 
-interface TaskProps {
+export interface TaskProps {
   task: TaskType;
   index: number;
   title: string;
@@ -45,8 +43,6 @@ export const Task = ({
   onTitleChange,
   onMigrate,
 }: TaskProps) => {
-  const metaKey = getMetaKey();
-
   return (
     <div
       key={task.id}
@@ -91,22 +87,22 @@ export const Task = ({
         />
       </div>
       {/* Migration buttons */}
-      <div className="ml-auto flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+      <div className="ml-auto flex gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100">
         <button
           aria-label="Move task to previous day"
-          className="flex h-6 w-6 items-center justify-center rounded-full text-white/60 transition-colors hover:bg-white/10 hover:text-white focus:bg-white/10 focus:text-white focus:ring-2 focus:ring-white/50 focus:outline-none"
+          className="flex h-6 w-6 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 hover:text-white focus:bg-white/10 focus:text-white focus:ring-2 focus:ring-white/50 focus:outline-none"
+          onClick={() => onMigrate(task.id, "backward")}
         >
           <ChevronLeftIcon />
         </button>
 
-        <ShortcutTip shortcut={["CTRL", "Meta", "→"]}>
-          <button
-            aria-label="Move task to next day"
-            className="flex h-6 w-6 items-center justify-center rounded-full text-white/60 transition-colors hover:bg-white/10 hover:text-white focus:bg-white/10 focus:text-white focus:ring-2 focus:ring-white/50 focus:outline-none"
-          >
-            <ChevronRightIcon />
-          </button>
-        </ShortcutTip>
+        <button
+          aria-label="Move task to next day"
+          className="flex h-6 w-6 items-center justify-center rounded-full text-white transition-colors hover:bg-white/10 hover:text-white focus:bg-white/10 focus:text-white focus:ring-2 focus:ring-white/50 focus:outline-none"
+          onClick={() => onMigrate(task.id, "forward")}
+        >
+          <ChevronRightIcon />
+        </button>
       </div>
     </div>
   );