mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-04 14:52:06 +00:00
fix(work-orders): expose advanced filter pill pressed state
Keep data-selected for AAP; aria-pressed tracks the same toggle for assistive tech.
This commit is contained in:
parent
776d3ebd9c
commit
07ecb4e0ab
5 changed files with 26 additions and 0 deletions
|
|
@ -64,6 +64,7 @@ function IndicatorPill({
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
data-indicator={kind}
|
data-indicator={kind}
|
||||||
data-selected={selected ? "true" : "false"}
|
data-selected={selected ? "true" : "false"}
|
||||||
|
aria-pressed={selected}
|
||||||
className="inline-flex items-center gap-1.5"
|
className="inline-flex items-center gap-1.5"
|
||||||
style={{
|
style={{
|
||||||
height: 26,
|
height: 26,
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ export function DotTogglePill({
|
||||||
)}
|
)}
|
||||||
style={{ ...selectedStyle, ...style }}
|
style={{ ...selectedStyle, ...style }}
|
||||||
{...props}
|
{...props}
|
||||||
|
aria-pressed={selected}
|
||||||
>
|
>
|
||||||
<span className="size-[7px] shrink-0 rounded-full" style={{ background: dotColor }} />
|
<span className="size-[7px] shrink-0 rounded-full" style={{ background: dotColor }} />
|
||||||
<span
|
<span
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,7 @@ export function TogglePill({
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
aria-pressed={selected}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,7 @@ export function ToggleSegment({
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
aria-pressed={selected}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -234,6 +234,28 @@ describe("WorkOrders Advanced Search page wiring (SH-121)", () => {
|
||||||
expect(params.docStatuses).toEqual([2, 1, 3]);
|
expect(params.docStatuses).toEqual([2, 1, 3]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("exposes indicator selected state as aria-pressed", () => {
|
||||||
|
const view = renderWithProviders(<WorkOrdersListPage />, {
|
||||||
|
route: "/workorders",
|
||||||
|
withAuth: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByRole("button", { name: "Advanced Filters" }));
|
||||||
|
advOpen = true;
|
||||||
|
view.rerender(<WorkOrdersListPage />);
|
||||||
|
|
||||||
|
const sheet = screen.getByRole("dialog", { name: "Advanced Filters" });
|
||||||
|
fireEvent.click(within(sheet).getByRole("button", { name: /Indicators/i }));
|
||||||
|
|
||||||
|
const names = [/Rescheduled ≥ 2/i, /Carried Over ≥ 2/i, /^Add-On$/i];
|
||||||
|
for (const name of names) {
|
||||||
|
const pill = within(sheet).getByRole("button", { name });
|
||||||
|
expect(pill).toHaveAttribute("aria-pressed", "false");
|
||||||
|
fireEvent.click(pill);
|
||||||
|
expect(pill).toHaveAttribute("aria-pressed", "true");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
it("applies Indicators, Flag, and Internal WO# through the public Advanced Filters sheet", () => {
|
it("applies Indicators, Flag, and Internal WO# through the public Advanced Filters sheet", () => {
|
||||||
const view = renderWithProviders(<WorkOrdersListPage />, {
|
const view = renderWithProviders(<WorkOrdersListPage />, {
|
||||||
route: "/workorders",
|
route: "/workorders",
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue