From dce0866fd86afb320d2771a0d745b409ac4f45ec Mon Sep 17 00:00:00 2001
From: Codex Review Integration <codex-review@local.invalid>
Date: Wed, 26 Aug 2026 15:38:05 -0300
Subject: [PATCH] fix: associate past-due status with date control

---
 .../_components/list/table/cells/date-cell.tsx        |  4 ++++
 .../_components/list/table/cells/due-date-cell.tsx    | 11 +++++++----
 .../due-date-past-due-announcement.test.tsx           | 11 ++++++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx
index 6d78143e..e0932926 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/date-cell.tsx
@@ -17,6 +17,8 @@ type DateCellProps = {
   defaultMode?: "week" | "date";
   /** When set, shows Clear in the popover so schedule can be removed (e.g. day-group → Unscheduled). */
   onClear?: () => void;
+  /** Screen-reader-only status appended inside the button so the accessible name keeps the visible date and adds durable state. */
+  srStatusSuffix?: string;
 };
 
 export function DateCell({
@@ -29,6 +31,7 @@ export function DateCell({
   onSaveWeek,
   defaultMode,
   onClear,
+  srStatusSuffix,
 }: DateCellProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [cellMode, setCellMode] = useState<"week" | "date">(
@@ -81,6 +84,7 @@ export function DateCell({
             </>
           )}
         </span>
+        {Boolean(srStatusSuffix) && <span className="sr-only">{srStatusSuffix}</span>}
         <ChevronDown
           size={14}
           className="ml-2 shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100"
diff --git a/src/app/(protected)/workorders/_components/list/table/cells/due-date-cell.tsx b/src/app/(protected)/workorders/_components/list/table/cells/due-date-cell.tsx
index 1c30600c..1ce90d18 100644
--- a/src/app/(protected)/workorders/_components/list/table/cells/due-date-cell.tsx
+++ b/src/app/(protected)/workorders/_components/list/table/cells/due-date-cell.tsx
@@ -35,10 +35,13 @@ export function DueDateCell({
 
   if (type !== "Emergency") {
     return (
-      <>
-        <DateCell value={value} q={q} highlight={highlight} onSave={onSave} />
-        {pastDue && <span className="sr-only">Past due</span>}
-      </>
+      <DateCell
+        value={value}
+        q={q}
+        highlight={highlight}
+        onSave={onSave}
+        srStatusSuffix={pastDue ? "Past due" : undefined}
+      />
     );
   }
 
diff --git a/src/test/app/(protected)/workorders/due-date-past-due-announcement.test.tsx b/src/test/app/(protected)/workorders/due-date-past-due-announcement.test.tsx
index 9606c43a..eddcf120 100644
--- a/src/test/app/(protected)/workorders/due-date-past-due-announcement.test.tsx
+++ b/src/test/app/(protected)/workorders/due-date-past-due-announcement.test.tsx
@@ -28,6 +28,15 @@ describe("Due Date past-due announcement", () => {
 
   it("announces past due on non-Emergency types too", () => {
     renderWithProviders(<DueDateCell type="PM" value="2026-07-03" pastDue onSave={vi.fn()} />);
-    expect(screen.getByText("Past due")).toBeInTheDocument();
+    // The visible date stays the leading part of the button's accessible name
+    // and the durable past-due state is appended to it.
+    expect(screen.getByRole("button", { name: /07-03\s*Past due/ })).toBeInTheDocument();
+  });
+
+  it("does not announce past due for a non-Emergency transient highlight alone", () => {
+    // `highlight` is also raised to draw attention to a row, which is not a
+    // durable state and must not be announced as one.
+    renderWithProviders(<DueDateCell type="PM" value="2026-07-03" highlight onSave={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "07-03" })).toBeInTheDocument();
   });
 });