fix(feed): don't tell people to click an indicator that isn't a button

The saved pip borrowed the bookmark button's label, so it read "Saved —
click to remove" on a plain span: hover, be told to click, click, nothing.
It gets its own "Saved" string. The status markers drop their sr-only
twin too — with a title already carrying the meaning, a screen reader
that surfaces title text said it twice.
This commit is contained in:
2026-07-17 00:45:06 +02:00
parent 3de7e0ba0e
commit e52fba8b07
3 changed files with 8 additions and 5 deletions
+6 -5
View File
@@ -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
SR that surfaces title text says it 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}>
<StatusIcon className={clsx("w-3.5 h-3.5", status.cls)} aria-hidden="true" />
<span className="sr-only">{status.label}</span>
<StatusIcon className={clsx("w-3.5 h-3.5", status.cls)} />
</span>
)}
</span>
<span>
{video.saved && (
<span title={t("card.savedRemove")}>
<Bookmark className="w-3.5 h-3.5 text-accent fill-current" aria-hidden="true" />
<span className="sr-only">{t("card.savedRemove")}</span>
<span title={t("card.savedMark")}>
<Bookmark className="w-3.5 h-3.5 text-accent fill-current" />
</span>
)}
</span>
+1
View File
@@ -4,6 +4,7 @@
"watchedUnmark": "Watched — click to unmark",
"markWatched": "Mark watched",
"savedRemove": "Saved — click to remove",
"savedMark": "Saved",
"saveForLater": "Save for later",
"unhide": "Unhide",
"hide": "Hide",
+1
View File
@@ -4,6 +4,7 @@
"watchedUnmark": "Megnézve — kattints a visszavonáshoz",
"markWatched": "Megnézettnek jelöl",
"savedRemove": "Mentve — kattints az eltávolításhoz",
"savedMark": "Mentve",
"saveForLater": "Mentés későbbre",
"unhide": "Megjelenítés",
"hide": "Elrejtés",