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:
@@ -171,19 +171,20 @@ function RowMetaCells({ video }: { video: Video }) {
|
|||||||
<span className="text-right tabular-nums">
|
<span className="text-right tabular-nums">
|
||||||
{video.duration_seconds != null ? formatDuration(video.duration_seconds) : ""}
|
{video.duration_seconds != null ? formatDuration(video.duration_seconds) : ""}
|
||||||
</span>
|
</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>
|
<span>
|
||||||
{StatusIcon && (
|
{StatusIcon && (
|
||||||
<span title={status.label}>
|
<span title={status.label}>
|
||||||
<StatusIcon className={clsx("w-3.5 h-3.5", status.cls)} aria-hidden="true" />
|
<StatusIcon className={clsx("w-3.5 h-3.5", status.cls)} />
|
||||||
<span className="sr-only">{status.label}</span>
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
{video.saved && (
|
{video.saved && (
|
||||||
<span title={t("card.savedRemove")}>
|
<span title={t("card.savedMark")}>
|
||||||
<Bookmark className="w-3.5 h-3.5 text-accent fill-current" aria-hidden="true" />
|
<Bookmark className="w-3.5 h-3.5 text-accent fill-current" />
|
||||||
<span className="sr-only">{t("card.savedRemove")}</span>
|
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
"watchedUnmark": "Watched — click to unmark",
|
"watchedUnmark": "Watched — click to unmark",
|
||||||
"markWatched": "Mark watched",
|
"markWatched": "Mark watched",
|
||||||
"savedRemove": "Saved — click to remove",
|
"savedRemove": "Saved — click to remove",
|
||||||
|
"savedMark": "Saved",
|
||||||
"saveForLater": "Save for later",
|
"saveForLater": "Save for later",
|
||||||
"unhide": "Unhide",
|
"unhide": "Unhide",
|
||||||
"hide": "Hide",
|
"hide": "Hide",
|
||||||
|
|||||||
@@ -4,6 +4,7 @@
|
|||||||
"watchedUnmark": "Megnézve — kattints a visszavonáshoz",
|
"watchedUnmark": "Megnézve — kattints a visszavonáshoz",
|
||||||
"markWatched": "Megnézettnek jelöl",
|
"markWatched": "Megnézettnek jelöl",
|
||||||
"savedRemove": "Mentve — kattints az eltávolításhoz",
|
"savedRemove": "Mentve — kattints az eltávolításhoz",
|
||||||
|
"savedMark": "Mentve",
|
||||||
"saveForLater": "Mentés későbbre",
|
"saveForLater": "Mentés későbbre",
|
||||||
"unhide": "Megjelenítés",
|
"unhide": "Megjelenítés",
|
||||||
"hide": "Elrejtés",
|
"hide": "Elrejtés",
|
||||||
|
|||||||
Reference in New Issue
Block a user