From c32334c8dbb52a251d87970296f2fcff59374bc6 Mon Sep 17 00:00:00 2001
From: Molecule AI Frontend Engineer <frontend-engineer@agents.moleculesai.app>
Date: Fri, 17 Apr 2026 21:17:32 +0000
Subject: [PATCH] fix(canvas): add ARIA landmark and live region to
 OnboardingWizard

WCAG 1.3.1 / 4.1.3: the onboarding card had no landmark role and no
live region, so screen readers had no way to know the card exists or
that the step changed.

- Add role="complementary" aria-label="Onboarding guide" to the card
  container so it appears as a named landmark in assistive technology.
- Add a role="status" aria-live="polite" aria-atomic="true" sr-only div
  that holds the current step label. When the step state changes React
  updates the div content, which the live region broadcasts to the AT
  without pulling focus away from the user's current position.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 canvas/src/components/OnboardingWizard.tsx | 24 +++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/canvas/src/components/OnboardingWizard.tsx b/canvas/src/components/OnboardingWizard.tsx
index a0d18bca..1bd68d6b 100644
--- a/canvas/src/components/OnboardingWizard.tsx
+++ b/canvas/src/components/OnboardingWizard.tsx
@@ -120,8 +120,20 @@ export function OnboardingWizard() {
   const currentStepIdx = STEPS.findIndex((s) => s.id === step);
   const currentStep = STEPS[currentStepIdx];
 
+  // Screen-reader labels for each step (announced on step transitions)
+  const stepLabels: Record<string, string> = {
+    welcome: "Onboarding step 1 of 4: Welcome",
+    "api-key": "Onboarding step 2 of 4: Configure your workspace",
+    "send-message": "Onboarding step 3 of 4: Send your first message",
+    done: "Onboarding complete",
+  };
+
   return (
-    <div className="fixed bottom-20 left-4 z-50 w-80 rounded-2xl border border-zinc-700/60 bg-zinc-900/95 backdrop-blur-xl shadow-2xl shadow-black/40 overflow-hidden">
+    <div
+      role="complementary"
+      aria-label="Onboarding guide"
+      className="fixed bottom-20 left-4 z-50 w-80 rounded-2xl border border-zinc-700/60 bg-zinc-900/95 backdrop-blur-xl shadow-2xl shadow-black/40 overflow-hidden"
+    >
       {/* Progress bar */}
       <div className="h-1 bg-zinc-800">
         <div
@@ -130,6 +142,16 @@ export function OnboardingWizard() {
         />
       </div>
 
+      {/* Polite live region — announces step transitions to screen readers */}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {stepLabels[step] ?? currentStep.title}
+      </div>
+
       <div className="p-4">
         {/* Step indicator */}
         <div className="flex items-center justify-between mb-2">