fix(player): the shut panel keeps the dialog's name; Tab onto a cut link opens the text
With the side panel shut the title heading was gone, and the dialog it named went unnamed: the strip carries an sr-only copy. A link below a clamp's cut stayed tabbable out of sight; reaching it now opens the text, measured from the text's top since focus scrolls the clamped box. DESIGN describes the modal as built, with log rows for its chrome and the wheel rule.
This commit is contained in:
@@ -45,6 +45,34 @@ describe("ClampedText", () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("opens when focus reaches a link the cut hides, and not for one in sight", () => {
|
||||
const tall = vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockReturnValue(400);
|
||||
const box = vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(60);
|
||||
const rect = (top: number, bottom: number) => ({ top, bottom }) as DOMRect;
|
||||
try {
|
||||
render(
|
||||
<ClampedText text="t" lines={3} moreLabel="More" lessLabel="Less">
|
||||
<a href="#a">seen</a>
|
||||
<a href="#b">cut</a>
|
||||
</ClampedText>,
|
||||
);
|
||||
const clamp = screen.getByText("seen").parentElement!;
|
||||
vi.spyOn(clamp, "getBoundingClientRect").mockReturnValue(rect(100, 160));
|
||||
vi.spyOn(screen.getByText("seen"), "getBoundingClientRect").mockReturnValue(rect(100, 120));
|
||||
act(() => screen.getByText("seen").focus());
|
||||
expect(screen.getByText("More")).toBeTruthy();
|
||||
// A Tab onto a link below the cut. The browser scrolls the clamped box to show it (measured in
|
||||
// Chrome: 45 px), so on screen the link sits inside the box: only the text's own top tells.
|
||||
clamp.scrollTop = 240;
|
||||
vi.spyOn(screen.getByText("cut"), "getBoundingClientRect").mockReturnValue(rect(130, 150));
|
||||
act(() => screen.getByText("cut").focus());
|
||||
expect(screen.getByText("Less").getAttribute("aria-expanded")).toBe("true");
|
||||
} finally {
|
||||
tall.mockRestore();
|
||||
box.mockRestore();
|
||||
}
|
||||
});
|
||||
|
||||
it("starts another text collapsed: a reused view opening the next item", () => {
|
||||
const tall = vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockReturnValue(400);
|
||||
const box = vi.spyOn(HTMLElement.prototype, "clientHeight", "get").mockReturnValue(60);
|
||||
|
||||
Reference in New Issue
Block a user