i18n(a11y): translate the modal + Welcome close buttons and the feed fallback (C-3.22)
House policy is HU+EN for every user-facing string. Modal's shared close button was a
hardcoded title="Close" (in every modal) — now t("common.close") + an aria-label.
Welcome's lightbox close aria-label and Feed's "this video" notification fallback are
translated too (new feed.thisVideo, HU+EN). The other Close hardcodes the review
listed were already fixed since.
This commit is contained in:
@@ -255,7 +255,7 @@ export default function Feed({
|
|||||||
meta: {
|
meta: {
|
||||||
kind: "video-hidden",
|
kind: "video-hidden",
|
||||||
videoId: id,
|
videoId: id,
|
||||||
title: v?.title ?? "this video",
|
title: v?.title ?? i18n.t("feed.thisVideo"),
|
||||||
channelId: v?.channel_id ?? "",
|
channelId: v?.channel_id ?? "",
|
||||||
channelName: v?.channel_title ?? "",
|
channelName: v?.channel_title ?? "",
|
||||||
},
|
},
|
||||||
@@ -270,7 +270,7 @@ export default function Feed({
|
|||||||
meta: {
|
meta: {
|
||||||
kind: "video-watched",
|
kind: "video-watched",
|
||||||
videoId: id,
|
videoId: id,
|
||||||
title: v?.title ?? "this video",
|
title: v?.title ?? i18n.t("feed.thisVideo"),
|
||||||
channelId: v?.channel_id ?? "",
|
channelId: v?.channel_id ?? "",
|
||||||
channelName: v?.channel_title ?? "",
|
channelName: v?.channel_title ?? "",
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { useEffect, useRef, type ReactNode } from "react";
|
import { useEffect, useRef, type ReactNode } from "react";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
import { X } from "lucide-react";
|
import { X } from "lucide-react";
|
||||||
import { useBackToClose } from "../lib/history";
|
import { useBackToClose } from "../lib/history";
|
||||||
|
|
||||||
@@ -27,6 +28,7 @@ export default function Modal({
|
|||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
maxWidth?: string;
|
maxWidth?: string;
|
||||||
}) {
|
}) {
|
||||||
|
const { t } = useTranslation();
|
||||||
// Browser/mouse Back closes the topmost modal instead of navigating away.
|
// Browser/mouse Back closes the topmost modal instead of navigating away.
|
||||||
useBackToClose(onClose);
|
useBackToClose(onClose);
|
||||||
|
|
||||||
@@ -76,7 +78,8 @@ export default function Modal({
|
|||||||
<h2 className="text-lg font-semibold leading-snug">{title}</h2>
|
<h2 className="text-lg font-semibold leading-snug">{title}</h2>
|
||||||
<button
|
<button
|
||||||
onClick={onClose}
|
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"
|
className="shrink-0 p-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition"
|
||||||
>
|
>
|
||||||
<X className="w-4 h-4" />
|
<X className="w-4 h-4" />
|
||||||
|
|||||||
@@ -212,6 +212,7 @@ function Preview({
|
|||||||
// Full-size image viewer: a dimmed, blurred backdrop with the screenshot fit to the viewport
|
// 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.
|
// (aspect ratio preserved via object-contain). Closes on backdrop click, the ✕, or Escape.
|
||||||
function Lightbox({ src, label, onClose }: { src: string; label: string; onClose: () => void }) {
|
function Lightbox({ src, label, onClose }: { src: string; label: string; onClose: () => void }) {
|
||||||
|
const { t } = useTranslation();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onKey = (e: KeyboardEvent) => {
|
const onKey = (e: KeyboardEvent) => {
|
||||||
if (e.key === "Escape") onClose();
|
if (e.key === "Escape") onClose();
|
||||||
@@ -235,7 +236,7 @@ function Lightbox({ src, label, onClose }: { src: string; label: string; onClose
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onClose}
|
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"
|
className="absolute top-4 right-4 p-2 rounded-full glass-card glass-hover text-fg"
|
||||||
>
|
>
|
||||||
<X className="w-5 h-5" />
|
<X className="w-5 h-5" />
|
||||||
|
|||||||
@@ -45,6 +45,7 @@
|
|||||||
"undo": "Undo",
|
"undo": "Undo",
|
||||||
"markedWatchedNamed": "Marked watched “{{title}}”",
|
"markedWatchedNamed": "Marked watched “{{title}}”",
|
||||||
"markedWatched": "Marked watched",
|
"markedWatched": "Marked watched",
|
||||||
|
"thisVideo": "this video",
|
||||||
"unwatch": "Unwatch",
|
"unwatch": "Unwatch",
|
||||||
"source": {
|
"source": {
|
||||||
"label": "Source",
|
"label": "Source",
|
||||||
|
|||||||
@@ -45,6 +45,7 @@
|
|||||||
"undo": "Visszavonás",
|
"undo": "Visszavonás",
|
||||||
"markedWatchedNamed": "Megnézettnek jelölve: „{{title}}”",
|
"markedWatchedNamed": "Megnézettnek jelölve: „{{title}}”",
|
||||||
"markedWatched": "Megnézettnek jelölve",
|
"markedWatched": "Megnézettnek jelölve",
|
||||||
|
"thisVideo": "ez a videó",
|
||||||
"unwatch": "Megnézés visszavonása",
|
"unwatch": "Megnézés visszavonása",
|
||||||
"source": {
|
"source": {
|
||||||
"label": "Forrás",
|
"label": "Forrás",
|
||||||
|
|||||||
Reference in New Issue
Block a user