From 065ebbd4035a45c6bfc57f3269e6d1b4d70cc128 Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Mon, 31 Aug 2026 11:46:04 -0300
Subject: [PATCH] fix(work-orders): expose flag picker as named dialog

---
 .../_components/list/table/cells/flag-cell.tsx     |  1 +
 .../app/(protected)/workorders/flag-cell.test.tsx  | 14 ++++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/app/(protected)/workorders/_components/list/table/cells/flag-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/flag-cell.tsx
index e3a3972d..ce17fa54 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/flag-cell.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/flag-cell.tsx
@@ -59,6 +59,7 @@ export function FlagCell({ color, disabled, onChange }: FlagCellProps) {
         slotProps={{
           paper: {
             className: "rounded-lg border border-border p-2",
+            role: "dialog",
             "aria-label": "Choose flag color",
           },
         }}
diff --git a/src/test/app/(protected)/workorders/flag-cell.test.tsx b/src/test/app/(protected)/workorders/flag-cell.test.tsx
index 1bc5cb46..db90e884 100644
--- a/src/test/app/(protected)/workorders/flag-cell.test.tsx
+++ b/src/test/app/(protected)/workorders/flag-cell.test.tsx
@@ -1,28 +1,34 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { FlagCell } from "@/app/(protected)/workorders/_components/list/table/cells/flag-cell";
 import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head";
 
+function flagPickerDialog() {
+  return screen.getByRole("dialog", { name: "Choose flag color" });
+}
+
 describe("FlagCell", () => {
   it("sets, changes, and clears a flag by named controls", () => {
     const onChange = vi.fn();
     const { rerender } = render(<FlagCell color={null} onChange={onChange} />);
 
     fireEvent.click(screen.getByRole("button", { name: "Add flag" }));
-    fireEvent.click(screen.getByRole("button", { name: "Red" }));
+    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Red" }));
     expect(onChange).toHaveBeenCalledWith("#EF4444");
+    expect(screen.queryByRole("dialog", { name: "Choose flag color" })).toBeNull();
 
     rerender(<FlagCell color="#EF4444" onChange={onChange} />);
     expect(screen.getByRole("button", { name: "Red flag" })).toBeInTheDocument();
 
     fireEvent.click(screen.getByRole("button", { name: "Red flag" }));
-    fireEvent.click(screen.getByRole("button", { name: "Blue" }));
+    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Blue" }));
     expect(onChange).toHaveBeenCalledWith("#3B82F6");
 
     rerender(<FlagCell color="#3B82F6" onChange={onChange} />);
     fireEvent.click(screen.getByRole("button", { name: "Blue flag" }));
-    fireEvent.click(screen.getByRole("button", { name: "Clear flag" }));
+    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Clear flag" }));
     expect(onChange).toHaveBeenCalledWith(null);
+    expect(screen.queryByRole("dialog", { name: "Choose flag color" })).toBeNull();
   });
 
   it("exposes a non-color name when the hex is not in the palette", () => {