From 0b7180ce8f406db2b949f7bae9acc858173fd76a Mon Sep 17 00:00:00 2001 From: npeter83 Date: Thu, 20 Aug 2026 05:25:48 +0200 Subject: [PATCH] a11y(e4): aria-label on the icon-only Plex watched-toggle buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hover watched-toggle on Plex movie/episode cards is icon-only (WatchedIcon, no text), so it carried a `title` but no accessible name for screen readers — and the empty-Circle unwatched glyph could read like a radio. Mirror the title into `aria-label` (the Modal close-button idiom) so the control announces its action. The PlexInfo watched buttons already have visible text labels, so they need nothing. FE gate green (tsc/eslint/prettier/knip, 309 vitest). --- frontend/src/components/plexCards.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/plexCards.tsx b/frontend/src/components/plexCards.tsx index e15a5e3a..ffc58495 100644 --- a/frontend/src/components/plexCards.tsx +++ b/frontend/src/components/plexCards.tsx @@ -100,6 +100,7 @@ export function PlexPosterCard({ onToggleWatched(card); }} title={card.status === "watched" ? t("plex.markUnwatched") : t("plex.markWatched")} + aria-label={card.status === "watched" ? t("plex.markUnwatched") : t("plex.markWatched")} className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 reveal hover:bg-black/80 transition" > @@ -438,6 +439,7 @@ export function EpisodeCard({ onToggleWatched(); }} title={ep.status === "watched" ? t("plex.markUnwatched") : t("plex.markWatched")} + aria-label={ep.status === "watched" ? t("plex.markUnwatched") : t("plex.markWatched")} className="absolute top-1.5 right-1.5 p-1 rounded-full bg-black/60 reveal hover:bg-black/80 transition" >