From bdc403e3e7648f387e847fce2bbec3e3b96351c9 Mon Sep 17 00:00:00 2001
From: webadderall <131426131+webadderall@users.noreply.github.com>
Date: Mon, 21 Sep 2026 18:28:25 +1000
Subject: [PATCH] fix: restore shared UI behavior and keyboard accessibility

---
 .../announcements/AnnouncementDialog.tsx      | 21 +++++-
 .../EditorAnnouncementBanner.tsx              |  4 +-
 src/components/launch/LaunchWindow.tsx        |  2 +-
 src/components/ui/button.tsx                  |  1 +
 src/components/ui/choice-group.tsx            |  2 +-
 src/components/ui/dropdown-menu.tsx           | 11 ++-
 src/components/ui/toggle.tsx                  | 11 ++-
 .../video-editor/layout/EditorHeader.tsx      |  4 +-
 src/design-extra-catalog.tsx                  |  1 +
 src/design-timeline-catalog.tsx               | 74 ++++++++++++-------
 src/i18n/locales/de/editor.json               |  3 +
 src/i18n/locales/en/editor.json               |  3 +
 src/i18n/locales/es/editor.json               |  3 +
 src/i18n/locales/fr/editor.json               |  3 +
 src/i18n/locales/it/editor.json               |  3 +
 src/i18n/locales/ko/editor.json               |  3 +
 src/i18n/locales/nl/editor.json               |  3 +
 src/i18n/locales/pt-BR/editor.json            |  3 +
 src/i18n/locales/ru/editor.json               |  3 +
 src/i18n/locales/zh-CN/editor.json            |  3 +
 src/i18n/locales/zh-TW/editor.json            |  3 +
 src/index.css                                 | 10 ++-
 22 files changed, 132 insertions(+), 42 deletions(-)

diff --git a/src/components/announcements/AnnouncementDialog.tsx b/src/components/announcements/AnnouncementDialog.tsx
index b42e1864..ca04d2ae 100644
--- a/src/components/announcements/AnnouncementDialog.tsx
+++ b/src/components/announcements/AnnouncementDialog.tsx
@@ -275,7 +275,11 @@ export function AnnouncementDialog({ audience }: { audience: AnnouncementAudienc
 									type="button"
 									variant="ghost"
 									size="icon"
-									className={usesCoverMedia ? "" : undefined}
+									className={
+										usesCoverMedia
+											? "text-white hover:text-white hover:bg-white/15"
+											: undefined
+									}
 									onClick={() =>
 										setCurrentIndex(
 											(index) =>
@@ -297,7 +301,8 @@ export function AnnouncementDialog({ audience }: { audience: AnnouncementAudienc
 										<Button
 											type="button"
 											key={announcement.id}
-											className={`h-1.5  ${
+											variant="ghost"
+											className={`h-1.5 min-w-0 p-0 rounded-full ${
 												index === currentIndex
 													? `w-6 ${usesCoverMedia ? "bg-white" : "bg-primary"}`
 													: `w-1.5 ${usesCoverMedia ? "bg-white/40" : "bg-foreground/25"}`
@@ -313,7 +318,11 @@ export function AnnouncementDialog({ audience }: { audience: AnnouncementAudienc
 									type="button"
 									variant="ghost"
 									size="icon"
-									className={usesCoverMedia ? "" : undefined}
+									className={
+										usesCoverMedia
+											? "text-white hover:text-white hover:bg-white/15"
+											: undefined
+									}
 									onClick={() =>
 										setCurrentIndex(
 											(index) => (index + 1) % announcements.length,
@@ -332,7 +341,11 @@ export function AnnouncementDialog({ audience }: { audience: AnnouncementAudienc
 							<Button
 								type="button"
 								variant="ghost"
-								className={usesCoverMedia ? "" : undefined}
+								className={
+									usesCoverMedia
+										? "text-white hover:text-white hover:bg-white/15"
+										: undefined
+								}
 								onClick={dismissCurrent}
 							>
 								{t("announcements.dismiss", "Dismiss")}
diff --git a/src/components/announcements/EditorAnnouncementBanner.tsx b/src/components/announcements/EditorAnnouncementBanner.tsx
index 40693e77..8d2af32b 100644
--- a/src/components/announcements/EditorAnnouncementBanner.tsx
+++ b/src/components/announcements/EditorAnnouncementBanner.tsx
@@ -118,7 +118,7 @@ export function EditorAnnouncementBanner() {
 					variant="link"
 					size="sm"
 					onClick={() => void openAction()}
-					className="h-auto shrink-0 gap-1 px-1 py-0 text-xs underline decoration-white/50 underline-offset-2 dark:decoration-black/50"
+					className="text-current h-auto shrink-0 gap-1 px-1 py-0 text-xs underline decoration-white/50 underline-offset-2 dark:decoration-black/50"
 				>
 					{current.action?.label}
 					{current.action?.url ? (
@@ -133,7 +133,7 @@ export function EditorAnnouncementBanner() {
 					variant="ghost"
 					type="button"
 					onClick={dismissCurrent}
-					className="absolute right-4 inline-flex h-6 w-6 items-center justify-center"
+					className="text-current absolute right-4 inline-flex h-6 w-6 items-center justify-center"
 					aria-label={t("announcements.dismiss", "Dismiss")}
 				>
 					<X className="h-3.5 w-3.5" />
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 03e19315..ec7f7af7 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -372,7 +372,7 @@ function LaunchWindowContent() {
 					onOpenProject={openProjectFromLibrary}
 					trigger={
 						<Button
-							aria-label={t("recording.openProject")}
+							aria-hidden="true"
 							tabIndex={-1}
 							variant="ghost"
 							className="absolute size-px min-w-0 p-0 pointer-events-none opacity-0"
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 1e46f023..901306cb 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -62,6 +62,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
 				"[&_svg]:size-5": iconSize === "lg",
 				"[&_svg]:size-6": iconSize === "xl",
 			},
+			variant === "link" && "h-auto p-0 underline underline-offset-4",
 			className,
 		),
 	};
diff --git a/src/components/ui/choice-group.tsx b/src/components/ui/choice-group.tsx
index d43e858f..fd66ab23 100644
--- a/src/components/ui/choice-group.tsx
+++ b/src/components/ui/choice-group.tsx
@@ -20,7 +20,7 @@ export function ChoiceGroup({
 }) {
 	return (
 		<TagGroup
-			size="md"
+			size={props.size ?? "md"}
 			aria-label={props["aria-label"]}
 			selectionMode="single"
 			disallowEmptySelection
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index c303ad0e..a8ec53ae 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -31,10 +31,13 @@ export function DropdownMenuContent({
 }
 export function DropdownMenuItem({
 	onSelect,
+	onClick,
+	onAction,
 	disabled,
 	children,
 	...props
-}: Omit<ComponentProps<typeof Dropdown.Item>, "onSelect"> & {
+}: Omit<ComponentProps<typeof Dropdown.Item>, "onSelect" | "onClick"> & {
+	onClick?: () => void;
 	onSelect?: (event: Event) => void;
 	disabled?: boolean;
 }) {
@@ -46,7 +49,11 @@ export function DropdownMenuItem({
 				props.textValue ??
 				(typeof children === "string" ? children : String(props.id ?? "Action"))
 			}
-			onAction={() => onSelect?.(new Event("select"))}
+			onAction={() => {
+				onSelect?.(new Event("select"));
+				onClick?.();
+				onAction?.();
+			}}
 		>
 			{children}
 		</Dropdown.Item>
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
index 23d787d8..63ae780b 100644
--- a/src/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -1,4 +1,5 @@
 import { ToggleButton } from "@heroui/react";
+import { cn } from "@/lib/utils";
 import type { ComponentProps } from "react";
 type Props = Omit<ComponentProps<typeof ToggleButton>, "size" | "variant"> & {
 	pressed?: boolean;
@@ -15,7 +16,15 @@ export function Toggle({ pressed, onPressedChange, disabled, size, variant, ...p
 			onChange={onPressedChange}
 			isDisabled={disabled}
 			size={size === "default" ? "md" : size}
-			variant={variant === "outline" ? "default" : "ghost"}
+			variant="ghost"
+			className={(state) =>
+				cn(
+					variant === "outline" && "border border-border bg-transparent",
+					typeof props.className === "function"
+						? props.className(state)
+						: props.className,
+				)
+			}
 		/>
 	);
 }
diff --git a/src/components/video-editor/layout/EditorHeader.tsx b/src/components/video-editor/layout/EditorHeader.tsx
index 2bf6550a..599648d9 100644
--- a/src/components/video-editor/layout/EditorHeader.tsx
+++ b/src/components/video-editor/layout/EditorHeader.tsx
@@ -115,7 +115,9 @@ export function EditorHeader(props: Props) {
 					onClick={props.onToggleVideos}
 				>
 					<FilmStrip className="h-4 w-4" />
-					<span className="text-sm font-semibold tracking-tight">Videos</span>
+					<span className="text-sm font-semibold tracking-tight">
+						{t("editor.library.videos", "Videos")}
+					</span>
 				</Button>
 				<Button
 					ref={projectBrowserTriggerRef}
diff --git a/src/design-extra-catalog.tsx b/src/design-extra-catalog.tsx
index 1e941784..7edba020 100644
--- a/src/design-extra-catalog.tsx
+++ b/src/design-extra-catalog.tsx
@@ -106,6 +106,7 @@ const modes = [
 	"presets-empty",
 	"presets-saved",
 	"announcement-popup",
+	"announcement-cover",
 	"announcement-banner",
 	"announcement-notification",
 ];
diff --git a/src/design-timeline-catalog.tsx b/src/design-timeline-catalog.tsx
index b375ed62..693da46c 100644
--- a/src/design-timeline-catalog.tsx
+++ b/src/design-timeline-catalog.tsx
@@ -111,8 +111,8 @@ function TimelineSample({
 			videoPath={media}
 			videoSourcePath={media}
 			disableSuggestedZooms
-			clipRegions={clips}
-			zoomRegions={zooms}
+			clipRegions={selection === "empty" ? [] : clips}
+			zoomRegions={selection === "empty" ? [] : zooms}
 			onZoomAdded={noop}
 			onZoomSpanChange={noop}
 			onZoomDelete={noop}
@@ -123,40 +123,62 @@ function TimelineSample({
 			onClipDelete={noop}
 			selectedClipId={selection === "clip" ? "clip-a" : null}
 			onSelectClip={noop}
-			annotationRegions={[
-				annotation,
-				{
-					...annotation,
-					id: "annotation-b",
-					startMs: 3500,
-					endMs: 5100,
-					content: "A second callout",
-					trackIndex: 1,
-				},
-			]}
+			annotationRegions={
+				selection === "empty"
+					? []
+					: [
+							annotation,
+							{
+								...annotation,
+								id: "annotation-b",
+								startMs: 3500,
+								endMs: 5100,
+								content: "A second callout",
+								trackIndex: 1,
+							},
+						]
+			}
 			onAnnotationAdded={noop}
 			onAnnotationSpanChange={noop}
 			onAnnotationDelete={noop}
 			onSelectAnnotation={noop}
 			selectedAnnotationId={selection === "annotation" ? "annotation-a" : null}
-			audioRegions={[
-				{
-					id: "audio-a",
-					startMs: 0,
-					endMs: 6000,
-					audioPath: `${location.origin}/tests/ui/fixtures/preview.mp4`,
-					volume: 0.8,
-				},
-			]}
+			audioRegions={
+				selection === "empty"
+					? []
+					: [
+							{
+								id: "audio-a",
+								startMs: 0,
+								endMs: 6000,
+								audioPath: `${location.origin}/tests/ui/fixtures/preview.mp4`,
+								volume: 0.8,
+							},
+						]
+			}
 			onAudioAdded={noop}
 			onAudioSpanChange={noop}
 			onAudioDelete={noop}
 			onSelectAudio={noop}
 			selectedAudioId={selection === "audio" ? "audio-a" : null}
-			captionRegions={[
-				{ id: "caption-a", startMs: 100, endMs: 2000, text: "Welcome to Recordly" },
-				{ id: "caption-b", startMs: 2900, endMs: 5200, text: "Create something clear." },
-			]}
+			captionRegions={
+				selection === "empty"
+					? []
+					: [
+							{
+								id: "caption-a",
+								startMs: 100,
+								endMs: 2000,
+								text: "Welcome to Recordly",
+							},
+							{
+								id: "caption-b",
+								startMs: 2900,
+								endMs: 5200,
+								text: "Create something clear.",
+							},
+						]
+			}
 			captionsEnabled
 			captionQuickAddEnabled
 			onCaptionAdded={noop}
diff --git a/src/i18n/locales/de/editor.json b/src/i18n/locales/de/editor.json
index 294c2ce5..41feceff 100644
--- a/src/i18n/locales/de/editor.json
+++ b/src/i18n/locales/de/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "Videos"
+	},
 	"playback": {
 		"play": "Wiedergabe",
 		"pause": "Pause",
diff --git a/src/i18n/locales/en/editor.json b/src/i18n/locales/en/editor.json
index 099393ba..b252ea13 100644
--- a/src/i18n/locales/en/editor.json
+++ b/src/i18n/locales/en/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "Videos"
+	},
 	"playback": {
 		"play": "Play",
 		"pause": "Pause",
diff --git a/src/i18n/locales/es/editor.json b/src/i18n/locales/es/editor.json
index c5da834b..d82080cc 100644
--- a/src/i18n/locales/es/editor.json
+++ b/src/i18n/locales/es/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "Vídeos"
+	},
 	"playback": {
 		"play": "Reproducir",
 		"pause": "Pausar",
diff --git a/src/i18n/locales/fr/editor.json b/src/i18n/locales/fr/editor.json
index 08704aaa..58be0d17 100644
--- a/src/i18n/locales/fr/editor.json
+++ b/src/i18n/locales/fr/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "Vidéos"
+	},
 	"playback": {
 		"play": "Lecture",
 		"pause": "Pause",
diff --git a/src/i18n/locales/it/editor.json b/src/i18n/locales/it/editor.json
index 0576b03c..6028781b 100644
--- a/src/i18n/locales/it/editor.json
+++ b/src/i18n/locales/it/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "Video"
+	},
 	"playback": {
 		"play": "Riproduci",
 		"pause": "Pausa",
diff --git a/src/i18n/locales/ko/editor.json b/src/i18n/locales/ko/editor.json
index ddc411b9..9088c5b9 100644
--- a/src/i18n/locales/ko/editor.json
+++ b/src/i18n/locales/ko/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "동영상"
+	},
 	"playback": {
 		"play": "재생",
 		"pause": "일시 정지",
diff --git a/src/i18n/locales/nl/editor.json b/src/i18n/locales/nl/editor.json
index 9d9376c7..db36f3f4 100644
--- a/src/i18n/locales/nl/editor.json
+++ b/src/i18n/locales/nl/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "Video’s"
+	},
 	"playback": {
 		"play": "Afspelen",
 		"pause": "Pauzeren",
diff --git a/src/i18n/locales/pt-BR/editor.json b/src/i18n/locales/pt-BR/editor.json
index 1a376631..fab51bf8 100644
--- a/src/i18n/locales/pt-BR/editor.json
+++ b/src/i18n/locales/pt-BR/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "Vídeos"
+	},
 	"playback": {
 		"play": "Reproduzir",
 		"pause": "Pausar",
diff --git a/src/i18n/locales/ru/editor.json b/src/i18n/locales/ru/editor.json
index 56c62e1c..4bb36c97 100644
--- a/src/i18n/locales/ru/editor.json
+++ b/src/i18n/locales/ru/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "Видео"
+	},
 	"playback": {
 		"play": "Воспроизвести",
 		"pause": "Пауза",
diff --git a/src/i18n/locales/zh-CN/editor.json b/src/i18n/locales/zh-CN/editor.json
index bb799ed1..9223c200 100644
--- a/src/i18n/locales/zh-CN/editor.json
+++ b/src/i18n/locales/zh-CN/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "视频"
+	},
 	"playback": {
 		"play": "播放",
 		"pause": "暂停",
diff --git a/src/i18n/locales/zh-TW/editor.json b/src/i18n/locales/zh-TW/editor.json
index 0332aed1..8a8aa211 100644
--- a/src/i18n/locales/zh-TW/editor.json
+++ b/src/i18n/locales/zh-TW/editor.json
@@ -1,4 +1,7 @@
 {
+	"library": {
+		"videos": "影片"
+	},
 	"playback": {
 		"play": "播放",
 		"pause": "暫停",
diff --git a/src/index.css b/src/index.css
index 46e22823..9615a725 100644
--- a/src/index.css
+++ b/src/index.css
@@ -127,13 +127,15 @@
 	}
 }
 
-/* highlight rings look ugly — keep them transparent; keyboard focus gets an inset underline. */
+/* Visible keyboard focus for HeroUI controls and native focusable elements. */
 :root,
 .dark {
-	--focus: transparent;
+	--focus: var(--foreground);
 }
-[data-focus-visible="true"] {
-	box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--foreground) 45%, transparent);
+[data-focus-visible="true"],
+:focus-visible {
+	outline: 2px solid var(--focus);
+	outline-offset: 2px;
 }
 
 @container (max-width: 110px) {