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

@@ -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();
+  });
+});

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).
     <a
       href={video.watch_url}
       target="_blank"
       rel="noreferrer"
+      aria-label={video.title ?? undefined}
       onClick={(e) => 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",