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.

frontend/src/components/ui/ClampedText.dom.test.tsx

@@ -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);

frontend/src/components/ui/ClampedText.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
+import { useLayoutEffect, useRef, useState, type FocusEvent, type ReactNode } from "react";
 import { Button } from "./Button";
 
 // Static class names, so Tailwind sees them.
@@ -9,7 +9,9 @@ const CLAMP = { 3: "line-clamp-3", 5: "line-clamp-5", 8: "line-clamp-8" } as con
  *  resize: the window and the text-size slider both move where the cut falls. Another text starts
  *  collapsed: a view reused for the next item (a show page opening another show) must not open its
  *  text already expanded. `children` draws the text in a richer form (a description's links and
- *  timestamps); `text` still names it, so another text is still another text. */
+ *  timestamps); `text` still names it, so another text is still another text. A link the cut hides
+ *  stays in the tab order (it is still text), so reaching it opens the text: focus never sits on
+ *  something out of sight. */
 export function ClampedText({
   text,
   lines,
@@ -45,9 +47,21 @@ export function ClampedText({
     ro.observe(el);
     return () => ro.disconnect();
   }, [text, expanded]);
+  // Measured from the text's top, not against the box on screen: focus scrolls the clamped box itself
+  // to bring the link into view (overflow:hidden still scrolls), so on screen it looked "in sight".
+  const revealFocused = (e: FocusEvent<HTMLDivElement>) => {
+    const box = e.currentTarget;
+    if (expanded || e.target === box) return;
+    const top = box.getBoundingClientRect().top - box.scrollTop;
+    if (e.target.getBoundingClientRect().bottom - top > box.clientHeight + 1) setExpanded(true);
+  };
   return (
     <div className={className}>
-      <div ref={ref} className={`${textClassName} ${expanded ? "" : CLAMP[lines]}`}>
+      <div
+        ref={ref}
+        className={`${textClassName} ${expanded ? "" : CLAMP[lines]}`}
+        onFocus={revealFocused}
+      >
         {children ?? text}
       </div>
       {(clipped || expanded) && (