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/onboarding.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'apps/web/src/components/onboarding.tsx')

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>
-- 
cgit v1.3.1