[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

4 files changed, 127 insertions, 10 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 837bd97a..788ef60d 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -11,19 +11,79 @@ import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
 import { useState, useRef } from "react";
 import { Input } from "@/components/ui/input";
 import { toast } from "sonner";
+import { useMediaStore } from "@/stores/media-store";
+import {
+  VideoExporter,
+  downloadBlob,
+  type ExportOptions,
+} from "@/lib/export-utils";
 
 export function EditorHeader() {
-  const { getTotalDuration } = useTimelineStore();
+  const { getTotalDuration, tracks } = useTimelineStore();
   const { activeProject, renameProject } = useProjectStore();
+  const { mediaItems } = useMediaStore();
   const [isEditing, setIsEditing] = useState(false);
   const [newName, setNewName] = useState(activeProject?.name || "");
+  const [isExporting, setIsExporting] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleExport = () => {
-    // TODO: Implement export functionality
-    // NOTE: This is already being worked on
-    console.log("Export project");
-    window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
+  const handleExport = async () => {
+    if (!activeProject) {
+      toast.error("No active project to export");
+      return;
+    }
+
+    if (tracks.length === 0) {
+      toast.error("Timeline is empty - nothing to export");
+      return;
+    }
+
+    setIsExporting(true);
+
+    try {
+      const exportOptions: ExportOptions = {
+        format: "mp4",
+        quality: "medium",
+        resolution: "1080p",
+        fps: activeProject.fps || 30,
+      };
+
+      const exporter = new VideoExporter((progress) => {
+        toast.loading(
+          `${progress.message} (${Math.round(progress.progress)}%)`,
+          {
+            id: "export-progress",
+          }
+        );
+      });
+
+      const exportedBlob = await exporter.exportProject(
+        activeProject,
+        tracks,
+        mediaItems,
+        exportOptions
+      );
+
+      // Download the exported video
+      const filename = `${activeProject.name}.${exportOptions.format}`;
+      downloadBlob(exportedBlob, filename);
+
+      toast.success("Video exported successfully!", {
+        id: "export-progress",
+      });
+
+      exporter.cleanup();
+    } catch (error) {
+      console.error("Export failed:", error);
+      toast.error(
+        `Export failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+        {
+          id: "export-progress",
+        }
+      );
+    } finally {
+      setIsExporting(false);
+    }
   };
 
   const handleNameClick = () => {
@@ -109,9 +169,12 @@ export function EditorHeader() {
         variant="primary"
         className="h-7 text-xs"
         onClick={handleExport}
+        disabled={isExporting}
       >
         <Download className="h-4 w-4" />
-        <span className="text-sm">Export</span>
+        <span className="text-sm">
+          {isExporting ? "Exporting..." : "Export"}
+        </span>
       </Button>
     </nav>
   );
diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx
index 1b43978e..c118e7c2 100644
--- a/apps/web/src/components/onboarding.tsx
+++ b/apps/web/src/components/onboarding.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { Dialog, DialogContent } from "./ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from "./ui/dialog";
 import { Button } from "./ui/button";
 import { ArrowRightIcon } from "lucide-react";
 import { useState, useEffect } from "react";
 import ReactMarkdown from "react-markdown";
+import { VisuallyHidden } from "./ui/visually-hidden";
 
 export function Onboarding() {
   const [step, setStep] = useState(0);
@@ -26,6 +27,19 @@ export function Onboarding() {
     localStorage.setItem("hasSeenOnboarding", "true");
   };
 
+  const getStepTitle = () => {
+    switch (step) {
+      case 0:
+        return "Welcome to OpenCut Beta! 🎉";
+      case 1:
+        return "⚠️ This is a super early beta!";
+      case 2:
+        return "🦋 Have fun testing!";
+      default:
+        return "OpenCut Onboarding";
+    }
+  };
+
   const renderStepContent = () => {
     switch (step) {
       case 0:
@@ -67,6 +81,9 @@ export function Onboarding() {
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[425px] !outline-none">
+        <DialogTitle>
+          <VisuallyHidden>{getStepTitle()}</VisuallyHidden>
+        </DialogTitle>
         {renderStepContent()}
       </DialogContent>
     </Dialog>
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 };