peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(a11y): every side-panel pin names its panel; the tab under an open card leaves the tree

Browse Source 
The card's own pin and the drawer's still said 'Unpin panel' / 'Pin panel open' after the edge tab
learned the title (F6). Naming them too made two buttons share a name, because the invisible tab
under an open card was still in the accessibility tree: it is now aria-hidden as well as out of
the Tab order. The generic sidebar.pin / unpin keys are gone.
This commit is contained in:
peter
2026-09-27 16:30:40 +02:00
parent 86884e368e
commit addb3d1b32
4 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/SidePanel.drawer.dom.test.tsx
+7 -3
View File
@@ -95,8 +95,12 @@ describe("SidePanel · the tab under an open card", () => {
disconnect() {}
} as unknown as typeof ResizeObserver;
mount(false); // pinned
const tab = screen.getByRole("button", { name: "sidebar.unpinNamed:Filters", hidden: true });
// The card's own pin is the one control by that name; the tab under it is out of the tree too.
const tab = document.querySelector<HTMLElement>(
'[aria-hidden="true"][aria-label="sidebar.unpinNamed:Filters"]',
)!;
expect(tab.tabIndex).toBe(-1);
expect(screen.getAllByRole("button", { name: "sidebar.unpinNamed:Filters" })).toHaveLength(1);
cleanup();
mount(true);
expect(screen.getByRole("button", { name: "sidebar.pinNamed:Filters" }).tabIndex).toBe(0);
@@ -113,7 +117,7 @@ describe("SidePanel · on touch", () => {
expect(dialog.textContent).toContain("panel body");
expect(onToggleCollapse).not.toHaveBeenCalled();
// Below 1024 a pinned panel would leave the content no room: no pin in the drawer.
expect(screen.queryByRole("button", { name: "sidebar.pin" })).toBeNull();
expect(screen.queryByRole("button", { name: "sidebar.pinNamed:Filters" })).toBeNull();
fireEvent.keyDown(window, { key: "Escape" });
expect(screen.queryByRole("dialog")).toBeNull();
});
@@ -129,7 +133,7 @@ describe("SidePanel · on touch", () => {
stubMedia({ coarse: true, narrow: false, wide: true });
const { onToggleCollapse } = mount();
fireEvent.click(screen.getByRole("button", { name: "sidebar.openPanel:Filters" }));
fireEvent.click(screen.getByRole("button", { name: "sidebar.pin" }));
fireEvent.click(screen.getByRole("button", { name: "sidebar.pinNamed:Filters" }));
expect(onToggleCollapse).toHaveBeenCalledOnce();
expect(screen.queryByRole("dialog")).toBeNull();
});