Merge: R1 S3 — i18n + a11y nits (modal/close i18n, Toaster live region, unsubscribe error)

frontend/src/components/ChannelPage.tsx

@@ -120,6 +120,9 @@ export default function ChannelPage({
       qc.invalidateQueries({ queryKey: ["feed"] });
       qc.invalidateQueries({ queryKey: ["blocked-channels"] });
     },
+    // No onError: block/unblock is a local DB op (not a YouTube write, so no 403 "connect" case),
+    // and its 400/409/422/500 are already surfaced by the global error modal (see api.ts req) —
+    // a caller toast here would just double it.
   });
 
   const subscribe = useMutation({
@@ -144,6 +147,7 @@ export default function ChannelPage({
       qc.invalidateQueries({ queryKey: ["feed"] });
       qc.invalidateQueries({ queryKey: ["channels"] });
     },
+    onError: (err) => notifyYouTubeActionError(err, t("channels.notify.unsubscribeFailed")),
   });
   const onUnsubscribe = async () => {
     const ok = await confirm({

frontend/src/components/DownloadCenter.tsx

@@ -681,6 +681,8 @@ export default function DownloadCenter() {
             ? api.cancelDownload(id)
             : api.deleteDownload(id),
     onSuccess: invalidate,
+    // No onError: a failed job action returns 400/409/422/500, already surfaced by the global
+    // error modal (api.ts req) with the backend's specific message — a caller toast would double it.
   });
 
   // Remove a shared-with-me item from your list (only your grant; the owner's file is untouched).

frontend/src/components/Feed.tsx

@@ -255,7 +255,7 @@ export default function Feed({
               meta: {
                 kind: "video-hidden",
                 videoId: id,
-                title: v?.title ?? "this video",
+                title: v?.title ?? i18n.t("feed.thisVideo"),
                 channelId: v?.channel_id ?? "",
                 channelName: v?.channel_title ?? "",
               },
@@ -270,7 +270,7 @@ export default function Feed({
               meta: {
                 kind: "video-watched",
                 videoId: id,
-                title: v?.title ?? "this video",
+                title: v?.title ?? i18n.t("feed.thisVideo"),
                 channelId: v?.channel_id ?? "",
                 channelName: v?.channel_title ?? "",
               },

frontend/src/components/Modal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, type ReactNode } from "react";
 import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 import { useBackToClose } from "../lib/history";
 
@@ -27,6 +28,7 @@ export default function Modal({
   children: ReactNode;
   maxWidth?: string;
 }) {
+  const { t } = useTranslation();
   // Browser/mouse Back closes the topmost modal instead of navigating away.
   useBackToClose(onClose);
 
@@ -76,7 +78,8 @@ export default function Modal({
           <h2 className="text-lg font-semibold leading-snug">{title}</h2>
           <button
             onClick={onClose}
-            title="Close"
+            title={t("common.close")}
+            aria-label={t("common.close")}
             className="shrink-0 p-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition"
           >
             <X className="w-4 h-4" />

frontend/src/components/SettingsPanel.tsx

@@ -533,6 +533,9 @@ function PlexWatchSync() {
     }
   };
 
+  // No onError on these: they're Plex, not YouTube (notifyYouTubeActionError would wrongly say
+  // "connect YouTube"), and their 409/500 are already surfaced by the global error modal — a caller
+  // toast would double it. Actual import failures come back as 200 {error}, handled by announce.
   const toggle = useMutation({
     mutationFn: (next: boolean) => api.plexWatchSetLink(next),
     onSuccess: (res) => {

frontend/src/components/Toaster.tsx

@@ -16,12 +16,23 @@ export default function Toaster() {
   const toasts = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
 
   return (
-    <div className="absolute bottom-4 left-4 z-overlay flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]">
+    // Stable, always-mounted polite live region — a polite region must PRE-EXIST in the DOM for a
+    // screen reader to announce content later inserted into it (a region created together with its
+    // first message is unreliably announced). `aria-live` (not role="status") on purpose:
+    // role="status" implies aria-atomic="true", which would re-read the WHOLE stack on every toast;
+    // aria-live defaults atomic=false, so only the newly-added toast is spoken. Error/fatal toasts
+    // additionally carry role="alert", which announces assertively on insertion regardless.
+    <div
+      aria-live="polite"
+      className="absolute bottom-4 left-4 z-overlay flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]"
+    >
       {toasts.map((toast) => {
         const { icon: Icon, color, bar } = LEVEL_STYLE[toast.level];
+        const urgent = toast.level === "error" || toast.level === "fatal";
         return (
           <div
             key={toast.id}
+            role={urgent ? "alert" : undefined}
             className="toast-card glass relative overflow-hidden rounded-xl px-3 py-3 flex items-start gap-3 animate-[popIn_0.16s_ease]"
           >
             <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />

frontend/src/components/Welcome.tsx

@@ -212,6 +212,7 @@ function Preview({
 // Full-size image viewer: a dimmed, blurred backdrop with the screenshot fit to the viewport
 // (aspect ratio preserved via object-contain). Closes on backdrop click, the ✕, or Escape.
 function Lightbox({ src, label, onClose }: { src: string; label: string; onClose: () => void }) {
+  const { t } = useTranslation();
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if (e.key === "Escape") onClose();
@@ -235,7 +236,7 @@ function Lightbox({ src, label, onClose }: { src: string; label: string; onClose
       <button
         type="button"
         onClick={onClose}
-        aria-label="Close"
+        aria-label={t("common.close")}
         className="absolute top-4 right-4 p-2 rounded-full glass-card glass-hover text-fg"
       >
         <X className="w-5 h-5" />

frontend/src/i18n/locales/en/feed.json

@@ -45,6 +45,7 @@
   "undo": "Undo",
   "markedWatchedNamed": "Marked watched “{{title}}”",
   "markedWatched": "Marked watched",
+  "thisVideo": "this video",
   "unwatch": "Unwatch",
   "source": {
     "label": "Source",

frontend/src/i18n/locales/hu/feed.json

@@ -45,6 +45,7 @@
   "undo": "Visszavonás",
   "markedWatchedNamed": "Megnézettnek jelölve: „{{title}}”",
   "markedWatched": "Megnézettnek jelölve",
+  "thisVideo": "ez a videó",
   "unwatch": "Megnézés visszavonása",
   "source": {
     "label": "Forrás",