fix(canvas): add role=status + aria-live=polite to loading + empty states (WCAG 4.1.3)

Screen readers were not announcing loading or empty states in several
canvas components. Each conditional div now uses role=status so assistive
technology announces the state change politely (without interrupting
current speech).

Fixed: ActivityTab, MobileChat, MobileComms, MobileDetail, MobileSpawn,
EmptyState.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

canvas/src/components/EmptyState.tsx

@@ -105,7 +105,7 @@ export function EmptyState() {
 
         {/* Template grid */}
         {loading ? (
-          <div className="flex items-center justify-center gap-2 text-xs text-ink-mid py-4">
+          <div role="status" aria-live="polite" className="flex items-center justify-center gap-2 text-xs text-ink-mid py-4">
             <Spinner />
             Loading templates...
           </div>

canvas/src/components/mobile/MobileChat.tsx

@@ -458,7 +458,7 @@ export function MobileChat({
           </div>
         )}
         {tab === "my" && historyLoading && (
-          <div style={{ padding: "20px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
+          <div role="status" aria-live="polite" style={{ padding: "20px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
             Loading chat history…
           </div>
         )}
@@ -493,7 +493,7 @@ export function MobileChat({
           </div>
         )}
         {tab === "my" && !historyLoading && !historyError && messages.length === 0 && (
-          <div style={{ padding: "20px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
+          <div role="status" aria-live="polite" style={{ padding: "20px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
             Send a message to start chatting.
           </div>
         )}

canvas/src/components/mobile/MobileComms.tsx

@@ -251,11 +251,11 @@ export function MobileComms({ dark }: { dark: boolean }) {
 
       <div style={{ padding: "0 14px", display: "flex", flexDirection: "column", gap: 8 }}>
         {loading && items.length === 0 ? (
-          <div style={{ padding: "30px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
+          <div role="status" aria-live="polite" style={{ padding: "30px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
             Loading recent comms…
           </div>
         ) : filtered.length === 0 ? (
-          <div style={{ padding: "30px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
+          <div role="status" aria-live="polite" style={{ padding: "30px 4px", textAlign: "center", color: p.text3, fontSize: 13 }}>
             No A2A traffic yet.
           </div>
         ) : (

canvas/src/components/mobile/MobileDetail.tsx

@@ -416,6 +416,8 @@ function DetailActivity({ workspaceId, dark }: { workspaceId: string; dark: bool
   if (items === null) {
     return (
       <div
+        role="status"
+        aria-live="polite"
         style={{
           background: p.surface,
           borderRadius: 16,

canvas/src/components/mobile/MobileSpawn.tsx

@@ -170,6 +170,8 @@ export function MobileSpawn({ dark, onClose }: { dark: boolean; onClose: () => v
         <div style={{ padding: "0 14px" }}>
           {loadingTemplates ? (
             <div
+              role="status"
+              aria-live="polite"
               style={{
                 padding: "24px 8px",
                 textAlign: "center",

canvas/src/components/tabs/ActivityTab.tsx

@@ -185,7 +185,7 @@ export function ActivityTab({ workspaceId }: Props) {
       {/* Activity list */}
       <div className="flex-1 overflow-y-auto p-3 space-y-1.5">
         {loading && activities.length === 0 && (
-          <div className="text-xs text-ink-mid text-center py-8">Loading activity...</div>
+          <div role="status" aria-live="polite" className="text-xs text-ink-mid text-center py-8">Loading activity...</div>
         )}
 
         {error && (