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:
parent
90ba2cd4df
commit
e2328abedc
@ -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>
|
||||
|
||||
@ -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 ? (
|
||||
|
||||
@ -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 ? (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user