fix: associate past-due status with date control

This commit is contained in:
Codex Review Integration 2026-08-26 15:38:05 -03:00
parent 57db887deb
commit dce0866fd8
3 changed files with 21 additions and 5 deletions

View file

@ -17,6 +17,8 @@ type DateCellProps = {
defaultMode?: "week" | "date"; defaultMode?: "week" | "date";
/** When set, shows Clear in the popover so schedule can be removed (e.g. day-group → Unscheduled). */ /** When set, shows Clear in the popover so schedule can be removed (e.g. day-group → Unscheduled). */
onClear?: () => void; 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({ export function DateCell({
@ -29,6 +31,7 @@ export function DateCell({
onSaveWeek, onSaveWeek,
defaultMode, defaultMode,
onClear, onClear,
srStatusSuffix,
}: DateCellProps) { }: DateCellProps) {
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null); const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
const [cellMode, setCellMode] = useState<"week" | "date">( const [cellMode, setCellMode] = useState<"week" | "date">(
@ -81,6 +84,7 @@ export function DateCell({
</> </>
)} )}
</span> </span>
{Boolean(srStatusSuffix) && <span className="sr-only">{srStatusSuffix}</span>}
<ChevronDown <ChevronDown
size={14} size={14}
className="ml-2 shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100" className="ml-2 shrink-0 opacity-0 transition-opacity group-hover/cell:opacity-100"

View file

@ -35,10 +35,13 @@ export function DueDateCell({
if (type !== "Emergency") { if (type !== "Emergency") {
return ( return (
<> <DateCell
<DateCell value={value} q={q} highlight={highlight} onSave={onSave} /> value={value}
{pastDue && <span className="sr-only">Past due</span>} q={q}
</> highlight={highlight}
onSave={onSave}
srStatusSuffix={pastDue ? "Past due" : undefined}
/>
); );
} }

View file

@ -28,6 +28,15 @@ describe("Due Date past-due announcement", () => {
it("announces past due on non-Emergency types too", () => { it("announces past due on non-Emergency types too", () => {
renderWithProviders(<DueDateCell type="PM" value="2026-07-03" pastDue onSave={vi.fn()} />); 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();
}); });
}); });