e2e/work-orders/type-filter.spec.ts

@@ -78,16 +78,16 @@ test.describe("Work Orders type filter (SH-243)", () => {
     await expect(trigger).toBeVisible();
     await trigger.click();
     const typeMenu = page.getByTestId("wo-type-filter-menu");
-    await expect(typeMenu.getByRole("menuitemcheckbox", { name: "PM" })).toBeVisible();
-    await typeMenu.getByRole("menuitemcheckbox", { name: "PM" }).click();
-    await typeMenu.getByRole("menuitemcheckbox", { name: "Emergency" }).click();
+    await expect(typeMenu.getByRole("button", { name: "PM" })).toBeVisible();
+    await typeMenu.getByRole("button", { name: "PM" }).click();
+    await typeMenu.getByRole("button", { name: "Emergency" }).click();
     await expect(trigger).toContainText("2 types selected");
 
     await expect
       .poll(() => boardUrls.some((url) => url.includes("types=2") && url.includes("types=3")))
       .toBe(true);
 
-    await typeMenu.getByRole("menuitemcheckbox", { name: "All types" }).click();
+    await typeMenu.getByRole("button", { name: "All types" }).click();
     await expect(trigger).toContainText("All types");
   });
 });

src/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
-import { Menu, MenuItem } from "@mui/material";
-import { ChevronDown, Tag } from "lucide-react";
-import { CheckboxIndicator } from "@/components/ui/checkbox-indicator";
+import { Popover } from "@mui/material";
+import { ChevronDown, Layers } from "lucide-react";
+import { CheckboxMenuItem } from "@/components/ui/checkbox-menu-item";
 import { MenuAnchorButton } from "@/components/ui/menu-anchor-button";
 import { WO_TYPES, type WOType } from "@/domain/work-orders/types/work-order-wizard";
 import { useMenuAnchor } from "@/hooks/use-menu-anchor";
@@ -22,30 +22,6 @@ function typeFilterLabel(selected: Set<WOType>): string {
   return `${selected.size} types selected`;
 }
 
-function TypeFilterMenuItem({
-  checked,
-  label,
-  onClick,
-}: {
-  checked: boolean;
-  label: string;
-  onClick: () => void;
-}) {
-  return (
-    <MenuItem
-      role="menuitemcheckbox"
-      aria-checked={checked}
-      dense
-      disableGutters
-      onClick={onClick}
-      className="flex w-full cursor-pointer items-center gap-2.5 rounded px-2.5 py-1.5"
-    >
-      <CheckboxIndicator checked={checked} size="sm" />
-      <span className="flex-1 text-left text-[13px] text-foreground">{label}</span>
-    </MenuItem>
-  );
-}
-
 export function WoTypeFilter({ selected, onChange, disabled = false }: WoTypeFilterProps) {
   const { anchorEl, open, setAnchor, close } = useMenuAnchor();
   const allSelected = selected.size === 0;
@@ -67,7 +43,7 @@ export function WoTypeFilter({ selected, onChange, disabled = false }: WoTypeFil
         onAnchor={setAnchor}
         open={open}
         disabled={disabled}
-        aria-label={`Work order types, ${label}`}
+        aria-haspopup="listbox"
         data-testid="wo-type-filter-trigger"
         className={cn(
           "flex h-[38px] w-auto shrink-0 items-center gap-2 rounded-md border px-3 text-[13px] font-semibold whitespace-nowrap transition-colors",
@@ -76,46 +52,39 @@ export function WoTypeFilter({ selected, onChange, disabled = false }: WoTypeFil
             : "border-[#bfe2f5] bg-(--color-primary-tint) text-primary",
         )}
       >
-        <Tag size={15} aria-hidden style={{ color: "var(--muted-foreground)" }} />
+        <Layers size={15} aria-hidden style={{ color: "var(--muted-foreground)" }} />
         {label}
         <ChevronDown size={14} aria-hidden style={{ color: "var(--muted-foreground)" }} />
       </MenuAnchorButton>
 
-      <Menu
+      <Popover
         open={open}
         anchorEl={anchorEl}
-        variant="menu"
-        transitionDuration={0}
-        onClose={(_event, reason) => {
-          if (reason === "backdropClick" || reason === "escapeKeyDown" || reason === "tabKeyDown") {
-            close();
-          }
-        }}
+        onClose={close}
         anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
         transformOrigin={{ vertical: "top", horizontal: "left" }}
         slotProps={{
           paper: {
-            className: "mt-1 w-[180px] rounded-lg border border-border p-1.5 shadow-md",
-          },
-          list: {
-            "aria-label": "Work order types",
+            className: "mt-1 w-[220px] rounded-lg border border-border p-1.5 shadow-md",
           },
         }}
       >
-        <TypeFilterMenuItem
-          checked={allSelected}
-          label="All types"
-          onClick={() => onChange(new Set())}
-        />
-        {WO_TYPES.map((type) => (
-          <TypeFilterMenuItem
-            key={type}
-            checked={selected.has(type)}
-            label={type}
-            onClick={() => toggle(type)}
+        <div data-testid="wo-type-filter-menu">
+          <CheckboxMenuItem
+            checked={allSelected}
+            label="All types"
+            onClick={() => onChange(new Set())}
           />
-        ))}
-      </Menu>
+          {WO_TYPES.map((type) => (
+            <CheckboxMenuItem
+              key={type}
+              checked={selected.has(type)}
+              label={type}
+              onClick={() => toggle(type)}
+            />
+          ))}
+        </div>
+      </Popover>
     </>
   );
 }

src/test/app/(protected)/workorders/dispatcher-filter.test.tsx

@@ -122,28 +122,4 @@ describe("DispatcherFilter (SH-242)", () => {
     await user.click(within(menu).getByRole("button", { name: "All dispatchers" }));
     expect(onChange).toHaveBeenLastCalledWith(new Set());
   });
-
-  it("does not put aria-checked on ordinary dispatcher buttons", async () => {
-    const user = userEvent.setup();
-    renderWithProviders(
-      <DispatcherFilter
-        selectedIds={new Set()}
-        onChange={vi.fn()}
-        users={users}
-        currentUserId="u1"
-      />,
-      { withAuth: false },
-    );
-
-    await user.click(screen.getByRole("button", { name: "All dispatchers" }));
-    const popover = screen.getByRole("presentation");
-    const items = [
-      within(popover).getByRole("button", { name: "All dispatchers" }),
-      within(popover).getByRole("button", { name: "Unassigned" }),
-      within(popover).getByRole("button", { name: "Blair Cho" }),
-    ];
-    for (const item of items) {
-      expect(item).not.toHaveAttribute("aria-checked");
-    }
-  });
 });

src/test/app/(protected)/workorders/wo-type-filter.test.tsx

@@ -4,7 +4,7 @@ import { describe, expect, it } from "vitest";
 import { WoTypeFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/wo-type-filter";
 import type { WOType } from "@/domain/work-orders/types/work-order-wizard";
 import { renderWithProviders } from "@/test/test-utils";
-import { screen, waitFor, within } from "@testing-library/react";
+import { screen } from "@testing-library/react";
 
 function TypeFilterHarness({
   initial = new Set<WOType>(),
@@ -17,78 +17,37 @@ function TypeFilterHarness({
   return <WoTypeFilter selected={selected} onChange={setSelected} disabled={disabled} />;
 }
 
-async function openTypeMenu(
-  user: ReturnType<typeof userEvent.setup>,
-  triggerName: string | RegExp,
-) {
+async function openTypeMenu(user: ReturnType<typeof userEvent.setup>, triggerName: string) {
   await user.click(screen.getByRole("button", { name: triggerName }));
-  return screen.getByRole("menu", { name: "Work order types" });
 }
 
-describe("WoTypeFilter", () => {
-  it("exposes a menu trigger, not a listbox", () => {
-    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
-
-    const trigger = screen.getByRole("button", { name: /all types/i });
-    expect(trigger).toHaveAttribute("aria-haspopup", "menu");
-    expect(trigger).not.toHaveAttribute("aria-haspopup", "listbox");
-  });
-
+describe("WoTypeFilter (SH-243)", () => {
   it("shows All types on the trigger and lists the four types in the menu", async () => {
     const user = userEvent.setup();
     renderWithProviders(<TypeFilterHarness />, { withAuth: false });
 
-    expect(screen.getByRole("button", { name: /all types/i })).toBeEnabled();
-    const menu = await openTypeMenu(user, /all types/i);
+    expect(screen.getByRole("button", { name: "All types" })).toBeEnabled();
+    await openTypeMenu(user, "All types");
 
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toBeInTheDocument();
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "Reactive" })).toBeInTheDocument();
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "Emergency" })).toBeInTheDocument();
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "Overdue" })).toBeInTheDocument();
-  });
-
-  it("exposes selected and unselected type state on the menu", async () => {
-    const user = userEvent.setup();
-    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
-
-    const menu = await openTypeMenu(user, /all types/i);
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveAttribute(
-      "aria-checked",
-      "true",
-    );
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
-      "aria-checked",
-      "false",
-    );
-
-    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveAttribute(
-      "aria-checked",
-      "false",
-    );
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
-      "aria-checked",
-      "true",
-    );
+    expect(screen.getByRole("button", { name: "PM" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Reactive" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Emergency" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Overdue" })).toBeInTheDocument();
   });
 
   it("labels a single type and multiple types on the trigger", async () => {
     const user = userEvent.setup();
     renderWithProviders(<TypeFilterHarness />, { withAuth: false });
 
-    const menu = await openTypeMenu(user, /all types/i);
-    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
+    await openTypeMenu(user, "All types");
+    await user.click(screen.getByRole("button", { name: "PM" }));
     expect(
-      screen.getByRole("button", { name: /work order types, pm/i, hidden: true, expanded: true }),
+      screen.getByRole("button", { name: "PM", hidden: true, expanded: true }),
     ).toBeInTheDocument();
 
-    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "Emergency" }));
+    await user.click(screen.getByRole("button", { name: "Emergency" }));
     expect(
-      screen.getByRole("button", {
-        name: /2 types selected/i,
-        hidden: true,
-        expanded: true,
-      }),
+      screen.getByRole("button", { name: "2 types selected", hidden: true, expanded: true }),
     ).toBeInTheDocument();
   });
 
@@ -96,15 +55,11 @@ describe("WoTypeFilter", () => {
     const user = userEvent.setup();
     renderWithProviders(<TypeFilterHarness initial={new Set(["PM"])} />, { withAuth: false });
 
-    expect(screen.getByRole("button", { name: /work order types, pm/i })).toBeInTheDocument();
-    const menu = await openTypeMenu(user, /work order types, pm/i);
-    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "All types" }));
+    expect(screen.getByRole("button", { name: "PM" })).toBeInTheDocument();
+    await openTypeMenu(user, "PM");
+    await user.click(screen.getByRole("button", { name: "All types" }));
     expect(
-      screen.getByRole("button", {
-        name: /work order types, all types/i,
-        hidden: true,
-        expanded: true,
-      }),
+      screen.getByRole("button", { name: "All types", hidden: true, expanded: true }),
     ).toBeInTheDocument();
   });
 
@@ -112,14 +67,10 @@ describe("WoTypeFilter", () => {
     const user = userEvent.setup();
     renderWithProviders(<TypeFilterHarness initial={new Set(["PM"])} />, { withAuth: false });
 
-    const menu = await openTypeMenu(user, /work order types, pm/i);
-    await user.click(within(menu).getByRole("menuitemcheckbox", { name: "PM" }));
+    await openTypeMenu(user, "PM");
+    await user.click(screen.getByRole("button", { name: "PM" }));
     expect(
-      screen.getByRole("button", {
-        name: /work order types, all types/i,
-        hidden: true,
-        expanded: true,
-      }),
+      screen.getByRole("button", { name: "All types", hidden: true, expanded: true }),
     ).toBeInTheDocument();
   });
 
@@ -127,93 +78,18 @@ describe("WoTypeFilter", () => {
     const user = userEvent.setup();
     renderWithProviders(<TypeFilterHarness disabled />, { withAuth: false });
 
-    const trigger = screen.getByRole("button", { name: /all types/i });
+    const trigger = screen.getByRole("button", { name: "All types" });
     expect(trigger).toBeDisabled();
     await user.click(trigger);
-    expect(screen.queryByRole("menu", { name: "Work order types" })).not.toBeInTheDocument();
-    expect(screen.queryByRole("menuitemcheckbox", { name: "PM" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: "PM" })).not.toBeInTheDocument();
   });
 
   it("lists All types first, then the four WO types", async () => {
     const user = userEvent.setup();
     renderWithProviders(<TypeFilterHarness />, { withAuth: false });
 
-    const menu = await openTypeMenu(user, /all types/i);
-    const labels = within(menu)
-      .getAllByRole("menuitemcheckbox")
-      .map((item) => item.textContent?.trim());
+    await openTypeMenu(user, "All types");
+    const labels = screen.getAllByRole("button").map((button) => button.textContent?.trim());
     expect(labels).toEqual(["All types", "PM", "Reactive", "Emergency", "Overdue"]);
   });
-
-  it("moves focus into the menu when opened", async () => {
-    const user = userEvent.setup();
-    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
-
-    const menu = await openTypeMenu(user, /all types/i);
-    await waitFor(() => {
-      expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
-    });
-  });
-
-  it("navigates with Arrow, Home, and End keys", async () => {
-    const user = userEvent.setup();
-    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
-
-    const menu = await openTypeMenu(user, /all types/i);
-    const allTypes = within(menu).getByRole("menuitemcheckbox", { name: "All types" });
-    const pm = within(menu).getByRole("menuitemcheckbox", { name: "PM" });
-    const overdue = within(menu).getByRole("menuitemcheckbox", { name: "Overdue" });
-
-    await waitFor(() => {
-      expect(allTypes).toHaveFocus();
-    });
-    await user.keyboard("{ArrowDown}");
-    expect(pm).toHaveFocus();
-    await user.keyboard("{End}");
-    expect(overdue).toHaveFocus();
-    await user.keyboard("{Home}");
-    expect(allTypes).toHaveFocus();
-    await user.keyboard("{ArrowUp}");
-    expect(overdue).toHaveFocus();
-  });
-
-  it("keeps inactive items out of the Tab sequence", async () => {
-    const user = userEvent.setup();
-    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
-
-    const menu = await openTypeMenu(user, /all types/i);
-    const items = within(menu).getAllByRole("menuitemcheckbox");
-    for (const item of items) {
-      expect(item).toHaveAttribute("tabindex", "-1");
-    }
-  });
-
-  it("toggles the focused type from the keyboard without closing the menu", async () => {
-    const user = userEvent.setup();
-    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
-
-    const menu = await openTypeMenu(user, /all types/i);
-    await waitFor(() => {
-      expect(within(menu).getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
-    });
-    await user.keyboard("{ArrowDown}");
-    await user.keyboard(" ");
-    expect(within(menu).getByRole("menuitemcheckbox", { name: "PM" })).toHaveAttribute(
-      "aria-checked",
-      "true",
-    );
-    expect(screen.getByRole("menu", { name: "Work order types" })).toBeInTheDocument();
-  });
-
-  it("closes the menu on Tab instead of walking each item", async () => {
-    const user = userEvent.setup();
-    renderWithProviders(<TypeFilterHarness />, { withAuth: false });
-
-    await openTypeMenu(user, /all types/i);
-    await waitFor(() => {
-      expect(screen.getByRole("menuitemcheckbox", { name: "All types" })).toHaveFocus();
-    });
-    await user.keyboard("{Tab}");
-    expect(screen.queryByRole("menu", { name: "Work order types" })).not.toBeInTheDocument();
-  });
 });

src/test/app/(protected)/workorders/work-orders-advanced-search-wiring.test.tsx

@@ -256,7 +256,7 @@ describe("WorkOrders Advanced Search page wiring (SH-121)", () => {
     expect(screen.getByRole("button", { name: "All dispatchers" })).toBeDisabled();
     expect(screen.getByRole("button", { name: "Week 7/20–7/24" })).toBeDisabled();
     expect(screen.getByRole("tab", { name: "Mon · 07/20" })).toBeDisabled();
-    expect(screen.getByRole("button", { name: /work order types, all types/i })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "All types" })).toBeDisabled();
     expect(screen.getByText("42 work orders")).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole("button", { name: /clear all/i }));
@@ -266,6 +266,6 @@ describe("WorkOrders Advanced Search page wiring (SH-121)", () => {
 
     expect(screen.queryByText("42 work orders")).not.toBeInTheDocument();
     expect(screen.getByRole("button", { name: "All dispatchers" })).toBeEnabled();
-    expect(screen.getByRole("button", { name: /work order types, all types/i })).toBeEnabled();
+    expect(screen.getByRole("button", { name: "All types" })).toBeEnabled();
   });
 });