fix(feed): name the row's status markers once, and reliably

Dropping the sr-only twin last round swapped a double announcement for
none: a bare span's title isn't dependably surfaced, so a screen reader
got no hint a row was live, a stream, or saved. role="img" + aria-label
names each marker once and keeps the hover.

frontend/src/components/VideoCard.tsx

@@ -171,19 +171,20 @@ function RowMetaCells({ video }: { video: Video }) {
       <span className="text-right tabular-nums">
         {video.duration_seconds != null ? formatDuration(video.duration_seconds) : ""}
       </span>
-      {/* `title` carries the meaning for both a hover and a screen reader — no sr-only twin, or an
+      {/* role="img" + aria-label names each marker ONCE and reliably; `title` alone wouldn't (a
-          SR that surfaces title text says it twice. These are indicators, NOT the controls in
+          bare span has no role, and screen readers don't dependably surface title on one), while a
-          Actions: the label must not tell anyone to click something that doesn't respond. */}
+          title plus an sr-only twin gets it announced twice. These are indicators, NOT the controls
+          in Actions — the label must not tell anyone to click something that doesn't respond. */}
       <span>
         {StatusIcon && (
-          <span title={status.label}>
+          <span role="img" aria-label={status.label} title={status.label}>
             <StatusIcon className={clsx("w-3.5 h-3.5", status.cls)} />
           </span>
         )}
       </span>
       <span>
         {video.saved && (
-          <span title={t("card.savedMark")}>
+          <span role="img" aria-label={t("card.savedMark")} title={t("card.savedMark")}>
             <Bookmark className="w-3.5 h-3.5 text-accent fill-current" />
           </span>
         )}