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.
This commit is contained in:
2026-07-17 00:47:40 +02:00
parent e52fba8b07
commit 30804dc7dd
+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. */}
{/* role="img" + aria-label names each marker ONCE and reliably; `title` alone wouldn't (a
bare span has no role, and screen readers don't dependably surface title on one), while a
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>
)}