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:
Arthur Bassi 2026-08-21 12:09:31 -03:00
parent 776d3ebd9c
commit 07ecb4e0ab
5 changed files with 26 additions and 0 deletions

View file

@ -64,6 +64,7 @@ function IndicatorPill({
onClick={onClick}
data-indicator={kind}
data-selected={selected ? "true" : "false"}
aria-pressed={selected}
className="inline-flex items-center gap-1.5"
style={{
height: 26,

View file

@ -37,6 +37,7 @@ export function DotTogglePill({
)}
style={{ ...selectedStyle, ...style }}
{...props}
aria-pressed={selected}
>
<span className="size-[7px] shrink-0 rounded-full" style={{ background: dotColor }} />
<span

View file

@ -28,6 +28,7 @@ export function TogglePill({
className,
)}
{...props}
aria-pressed={selected}
>
{children}
</button>

View file

@ -28,6 +28,7 @@ export function ToggleSegment({
className,
)}
{...props}
aria-pressed={selected}
>
{children}
</button>

View file

@ -234,6 +234,28 @@ describe("WorkOrders Advanced Search page wiring (SH-121)", () => {
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", () => {
const view = renderWithProviders(<WorkOrdersListPage />, {
route: "/workorders",