fix(canvas): add role=status + aria-live to remaining loading states

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.
This commit is contained in:
Hongming Wang 2026-05-03 07:11:48 -07:00
parent 90ba2cd4df
commit e2328abedc
3 changed files with 3 additions and 3 deletions

View File

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

View File

@ -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 ? (

View File

@ -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 ? (