From bfc6d199c03526f8e83febc9847b573e616ca35b Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sat, 26 Sep 2026 00:39:10 +0200 Subject: [PATCH] fix(a11y): a video card's thumbnail link is named by the title, not the duration badge (E28 S3d4) Its only text was the duration, so every card's first Tab stop was announced as "44:10". --- frontend/src/components/VideoCard.nav.dom.test.tsx | 11 +++++++++++ frontend/src/components/VideoCard.tsx | 3 +++ 2 files changed, 14 insertions(+) diff --git a/frontend/src/components/VideoCard.nav.dom.test.tsx b/frontend/src/components/VideoCard.nav.dom.test.tsx index 2121cc3c..74b3976b 100644 --- a/frontend/src/components/VideoCard.nav.dom.test.tsx +++ b/frontend/src/components/VideoCard.nav.dom.test.tsx @@ -87,3 +87,14 @@ describe("VideoCard — keyboard navigation hooks", () => { expect(screen.getByTestId("video-card").hasAttribute("data-nav-index")).toBe(false); }); }); + +// E28 S3d4: the thumbnail link's only text is the duration badge, so each card's first Tab stop was +// announced as "20:00". It is named by the title, like the title link beside it. +describe("VideoCard — the thumbnail link", () => { + it("is named by the video's title, not its duration", () => { + renderCard("cards"); + const links = screen.getAllByRole("link", { name: "Cicada 3301" }); + expect(links.length).toBeGreaterThanOrEqual(2); + expect(screen.queryByRole("link", { name: "20:00" })).toBeNull(); + }); +}); diff --git a/frontend/src/components/VideoCard.tsx b/frontend/src/components/VideoCard.tsx index 2260ad72..9f0eea32 100644 --- a/frontend/src/components/VideoCard.tsx +++ b/frontend/src/components/VideoCard.tsx @@ -223,10 +223,13 @@ function Thumb({ }; return ( + // Named by the title: its only text is the duration badge, so a screen reader heard the first Tab + // stop of every card as "44:10" (E28 S3d4). openInApp(e, video, onOpen)} className={clsx( "block relative rounded-xl overflow-hidden bg-surface border border-border shadow-md group-hover:shadow-2xl transition-shadow",