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:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user