From e2328abedcd95a42e0d6596d79b944f25074d5a9 Mon Sep 17 00:00:00 2001
From: Hongming Wang <hongmingwang.rabbit@users.noreply.github.com>
Date: Sun, 3 May 2026 07:11:48 -0700
Subject: [PATCH] fix(canvas): add role=status + aria-live to remaining loading
 states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three loading-state divs were missing the role/aria pattern that
TemplatePalette.tsx and EmptyState.tsx already follow. Screen readers
get no signal that the page is waiting:

- canvas/src/app/page.tsx — full-screen "Loading canvas..." while
  the websocket hydrates. First paint of the entire app.
- canvas/src/components/settings/TokensTab.tsx — "Loading tokens..."
- canvas/src/components/settings/OrgTokensTab.tsx — "Loading keys..."

Add role="status" + aria-live="polite" to the wrapping div so
assistive tech announces the wait and the eventual transition.
Visual rendering unchanged.
---
 canvas/src/app/page.tsx                         | 2 +-
 canvas/src/components/settings/OrgTokensTab.tsx | 2 +-
 canvas/src/components/settings/TokensTab.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/canvas/src/app/page.tsx b/canvas/src/app/page.tsx
index 137cd623..9c74b0fd 100644
--- a/canvas/src/app/page.tsx
+++ b/canvas/src/app/page.tsx
@@ -54,7 +54,7 @@ export default function Home() {
   if (hydrating) {
     return (
       <div className="fixed inset-0 flex items-center justify-center bg-surface">
-        <div className="flex flex-col items-center gap-3">
+        <div role="status" aria-live="polite" className="flex flex-col items-center gap-3">
           <Spinner size="lg" />
           <span className="text-xs text-ink-soft">Loading canvas...</span>
         </div>
diff --git a/canvas/src/components/settings/OrgTokensTab.tsx b/canvas/src/components/settings/OrgTokensTab.tsx
index 9d3b05a6..d0891232 100644
--- a/canvas/src/components/settings/OrgTokensTab.tsx
+++ b/canvas/src/components/settings/OrgTokensTab.tsx
@@ -182,7 +182,7 @@ export function OrgTokensTab() {
 
       {/* Token list */}
       {loading ? (
-        <div className="flex items-center justify-center gap-2 py-6 text-ink-soft text-xs">
+        <div role="status" aria-live="polite" className="flex items-center justify-center gap-2 py-6 text-ink-soft text-xs">
           <Spinner /> Loading keys...
         </div>
       ) : tokens.length === 0 ? (
diff --git a/canvas/src/components/settings/TokensTab.tsx b/canvas/src/components/settings/TokensTab.tsx
index 0e2d1840..2a14e836 100644
--- a/canvas/src/components/settings/TokensTab.tsx
+++ b/canvas/src/components/settings/TokensTab.tsx
@@ -129,7 +129,7 @@ export function TokensTab({ workspaceId }: TokensTabProps) {
 
       {/* Token list */}
       {loading ? (
-        <div className="flex items-center justify-center gap-2 py-6 text-ink-soft text-xs">
+        <div role="status" aria-live="polite" className="flex items-center justify-center gap-2 py-6 text-ink-soft text-xs">
           <Spinner /> Loading tokens...
         </div>
       ) : tokens.length === 0 ? (