fix(ui): focus, paging and state that a key or a finger can reach
- A key landing on a side panel's tab steps into the card it peeks open, not onto the hidden tab. - The Channels cards keep their status / pager row at the list's end while the band is folded. - A menu row's note shows on an enabled row too: the download state under 'Download…', not a title. - A removal chip hands the focus to its neighbour before it goes, for every caller (the feed's and Plex's active filters); the hidden-filter cue's own copy is gone. - Back to a spot within a page's end spacer lands at the page's end, not its top. - A running push / revert is tracked per list: another list's push is no longer refused unseen.
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
// hover-to-peek and click-to-pin. jsdom has no matchMedia: the stub answers the two queries SidePanel
|
||||
// asks from three switches, and can flip them live (a tablet turning).
|
||||
import { describe, it, expect, afterEach, vi } from "vitest";
|
||||
import { act, render, screen, fireEvent, cleanup } from "@testing-library/react";
|
||||
import { act, render, screen, fireEvent, cleanup, waitFor } from "@testing-library/react";
|
||||
|
||||
vi.mock("react-i18next", async (importOriginal) => {
|
||||
const actual = await importOriginal<typeof import("react-i18next")>();
|
||||
@@ -105,6 +105,21 @@ describe("SidePanel · the tab under an open card", () => {
|
||||
mount(true);
|
||||
expect(screen.getByRole("button", { name: "sidebar.pinNamed:Filters" }).tabIndex).toBe(0);
|
||||
});
|
||||
|
||||
it("hands a key's focus on the tab to the card it peeks open, not to the hidden tab", async () => {
|
||||
stubMedia({ coarse: false, narrow: false, wide: true });
|
||||
globalThis.ResizeObserver ??= class {
|
||||
observe() {}
|
||||
unobserve() {}
|
||||
disconnect() {}
|
||||
} as unknown as typeof ResizeObserver;
|
||||
mount(true);
|
||||
const tab = screen.getByRole("button", { name: "sidebar.pinNamed:Filters" });
|
||||
act(() => tab.focus()); // jsdom calls every focus :focus-visible — a key's focus, here
|
||||
await waitFor(() => expect(document.activeElement?.closest("aside")).not.toBeNull());
|
||||
expect(document.activeElement?.getAttribute("aria-label")).toBe("sidebar.pinNamed:Filters");
|
||||
expect(document.activeElement).not.toBe(tab);
|
||||
});
|
||||
});
|
||||
|
||||
describe("SidePanel · on touch", () => {
|
||||
|
||||
Reference in New Issue
Block a user