diff options
Diffstat (limited to 'apps/web/src/components/onboarding.tsx')
| -rw-r--r-- | apps/web/src/components/onboarding.tsx | 19 |
1 files changed, 18 insertions, 1 deletions
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> |