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

@@ -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">