From 073cb817d342b0b54cf5ad156435a00c9bb91168 Mon Sep 17 00:00:00 2001
From: naoNao89 <90588855+naoNao89@users.noreply.github.com>
Date: Tue, 29 Jul 2025 21:35:33 +0700
Subject: [UI] Fix dialog accessibility and export functionality

- Add DialogTitle with VisuallyHidden to CommandDialog and onboarding
- Replace YouTube redirect with functional VideoExporter implementation
- Create VisuallyHidden component for screen reader accessibility

Resolves GitHub issue #477 (export redirecting to YouTube)
Fixes console warnings about DialogContent accessibility compliance
---
 apps/web/src/components/ui/command.tsx         |  9 ++++++--
 apps/web/src/components/ui/visually-hidden.tsx | 32 ++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/ui/visually-hidden.tsx

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 11b27041..b91cbd3d 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -1,12 +1,14 @@
 "use client";
 
 import * as React from "react";
-import { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
 import { cn } from "../../lib/utils";
-import { Dialog, DialogContent } from "./dialog";
+import { Dialog, DialogContent, DialogTitle } from "./dialog";
+import { VisuallyHidden } from "./visually-hidden";
+
+type DialogProps = React.ComponentProps<typeof Dialog>;
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -27,6 +29,9 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
+        <DialogTitle>
+          <VisuallyHidden>Command Menu</VisuallyHidden>
+        </DialogTitle>
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
diff --git a/apps/web/src/components/ui/visually-hidden.tsx b/apps/web/src/components/ui/visually-hidden.tsx
new file mode 100644
index 00000000..7d6fc435
--- /dev/null
+++ b/apps/web/src/components/ui/visually-hidden.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+/**
+ * VisuallyHidden component provides content that is accessible to screen readers
+ * but visually hidden from sighted users. This is useful for providing context
+ * or labels that are necessary for accessibility but would be redundant visually.
+ * 
+ * Based on the Radix UI VisuallyHidden primitive pattern.
+ */
+const VisuallyHidden = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    className={cn(
+      // Screen reader only styles - visually hidden but accessible
+      "absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0",
+      // Alternative approach using sr-only if preferred
+      // "sr-only",
+      className
+    )}
+    {...props}
+  />
+));
+
+VisuallyHidden.displayName = "VisuallyHidden";
+
+export { VisuallyHidden };
-- 
cgit v1.3.1