molecule-ai/molecule-core
35
0
Fork 2
Code Issues 16 Pull Requests 2 Actions 49 Packages Projects Releases Wiki Activity

Merge pull request #874 from Molecule-AI/fix/canvas-a11y-onboarding-aria-live

Browse Source 
fix(canvas): add aria-live region to onboarding step transitions
This commit is contained in:
molecule-ai[bot] 2026-04-18 01:19:36 +00:00 committed by GitHub
commit 871e6bbcb7
1 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
canvas/src/components/OnboardingWizard.tsx
View File

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