Merge pull request [#482](https://github.com/mazeincoding/AppCut/issues/482)

1 files changed, 19 insertions, 3 deletions

diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx
index 1b43978e..d72ac0f6 100644
--- a/apps/web/src/components/onboarding.tsx
+++ b/apps/web/src/components/onboarding.tsx
@@ -1,6 +1,6 @@
 "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";
@@ -26,6 +26,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:
@@ -42,7 +55,7 @@ export function Onboarding() {
         return (
           <div className="space-y-5">
             <div className="space-y-3">
-              <Title title="⚠️ This is a super early beta!" />
+              <Title title={getStepTitle()} />
               <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
               <Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
             </div>
@@ -53,7 +66,7 @@ export function Onboarding() {
         return (
           <div className="space-y-5">
             <div className="space-y-3">
-              <Title title="🦋 Have fun testing!" />
+              <Title title={getStepTitle()} />
               <Description description="Join our [Discord](https://discord.gg/zmR9N35cjK), chat with cool people and share feedback to help make OpenCut the best editor ever." />
             </div>
             <NextButton onClick={handleClose}>Finish</NextButton>
@@ -67,6 +80,9 @@ export function Onboarding() {
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[425px] !outline-none">
+        <DialogTitle>
+          <span className="sr-only">{getStepTitle()}</span>
+        </DialogTitle>
         {renderStepContent()}
       </DialogContent>
     </Dialog>