mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-07 16:19:01 +00:00
fix: associate past-due status with date control
This commit is contained in:
parent
57db887deb
commit
dce0866fd8
3 changed files with 21 additions and 5 deletions
|
|
@ -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"
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue