Skip to content

Commit ebea6ca

Browse files
cliffhallclaude
andcommitted
fix(network): expose category toggle state via aria-pressed
The category UnstyledButtons in NetworkControls previously communicated their toggled state only via background color. Adds aria-pressed={active} so assistive tech can discover the on/off state without visuals, with a test that asserts the attribute tracks the visibleCategories prop. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 9185fdf commit ebea6ca

2 files changed

Lines changed: 18 additions & 0 deletions

File tree

clients/web/src/components/groups/NetworkControls/NetworkControls.test.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,23 @@ describe("NetworkControls", () => {
3232
expect(onFilterChange).toHaveBeenLastCalledWith("x");
3333
});
3434

35+
it("reflects category visibility via aria-pressed", () => {
36+
renderWithMantine(
37+
<NetworkControls
38+
{...baseProps}
39+
visibleCategories={{ auth: true, transport: false }}
40+
/>,
41+
);
42+
expect(screen.getByRole("button", { name: "auth" })).toHaveAttribute(
43+
"aria-pressed",
44+
"true",
45+
);
46+
expect(screen.getByRole("button", { name: "transport" })).toHaveAttribute(
47+
"aria-pressed",
48+
"false",
49+
);
50+
});
51+
3552
it("fires onToggleCategory with inverted visibility when clicked", async () => {
3653
const user = userEvent.setup();
3754
const onToggleCategory = vi.fn();

clients/web/src/components/groups/NetworkControls/NetworkControls.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export function NetworkControls({
6262
w="100%"
6363
p="sm"
6464
variant="listItem"
65+
aria-pressed={active}
6566
bg={active ? "var(--mantine-primary-color-light)" : undefined}
6667
onClick={() => onToggleCategory(category, !active)}
6768
>

0 commit comments

Comments
 (0)