a11y(frontend): select outline, CardTitle polymorphic as prop, cheatsheet labels

src/components/KeyboardCheatsheet/KeyboardCheatsheet.test.tsx

@@ -267,4 +267,86 @@ describe("KeyboardCheatsheet", () => {
 
     unmount();
   });
+
+  it("test_dialog_is_aria_labelledby_visible_heading", async () => {
+    // The DialogContent must carry an aria-labelledby pointing at
+    // the visible <h2> so screen readers announce "Keyboard, dialog"
+    // instead of leaving the modal unlabeled (Radix logs a warning
+    // otherwise). The id referenced must also resolve to a real
+    // element with that id inside the cheatsheet.
+    const onClose = vi.fn();
+    const { unmount } = renderIntoContainer(
+      <KeyboardCheatsheet open={true} onClose={onClose} />
+    );
+
+    const body = await settle((b) =>
+      b.querySelector('[data-testid="keyboard-cheatsheet"]') !== null
+    );
+
+    const sheet = body.querySelector(
+      '[data-testid="keyboard-cheatsheet"]'
+    ) as HTMLElement | null;
+    expect(sheet).not.toBeNull();
+
+    // The Radix DialogContent exposes its labelledby on the panel
+    // element itself. We accept either the dialog content id (which
+    // is the data-testid) or its first role-bearing descendant —
+    // depending on which element Radix attaches aria-labelledby to.
+    const labelledBy =
+      sheet?.getAttribute("aria-labelledby") ??
+      sheet
+        ?.querySelector("[aria-labelledby]")
+        ?.getAttribute("aria-labelledby") ??
+      null;
+    expect(labelledBy).not.toBeNull();
+    expect(labelledBy).toBe("keyboard-cheatsheet-title");
+
+    // And the id must point at a real element whose text content is
+    // the visible "Keyboard" heading — closing the loop between the
+    // a11y wiring and the visible UI.
+    const titleEl = body.querySelector("#keyboard-cheatsheet-title");
+    expect(titleEl).not.toBeNull();
+    expect(titleEl?.textContent).toBe("Keyboard");
+
+    unmount();
+  });
+
+  it("test_close_button_has_specific_aria_label_and_describedby", async () => {
+    // The cheatsheet renders an explicit close button (the shared
+    // DialogContent X in the corner has a generic "Close dialog"
+    // label that's out of scope here). The cheatsheet-specific one
+    // must:
+    //  - be findable by its cheatsheet-specific aria-label, and
+    //  - carry aria-describedby pointing back at the visible heading
+    //    so screen-reader users hear "Close keyboard cheatsheet,
+    //    Keyboard, button".
+    const onClose = vi.fn();
+    const { unmount } = renderIntoContainer(
+      <KeyboardCheatsheet open={true} onClose={onClose} />
+    );
+
+    const body = await settle((b) =>
+      b.querySelector('[data-testid="keyboard-cheatsheet"]') !== null
+    );
+
+    const closeBtn = body.querySelector(
+      '[aria-label="Close keyboard cheatsheet"]'
+    ) as HTMLButtonElement | null;
+    expect(closeBtn).not.toBeNull();
+
+    // The describedby wires the close button back to the title so
+    // the screen-reader announcement has context.
+    expect(closeBtn?.getAttribute("aria-describedby")).toBe(
+      "keyboard-cheatsheet-title"
+    );
+
+    // Clicking the close button must invoke the consumer's onClose.
+    expect(onClose).not.toHaveBeenCalled();
+    act(() => {
+      closeBtn?.click();
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+
+    unmount();
+  });
 });