fix(org): name the main region on every page and let loading states be announced

A status region with only a label and hidden children announces nothing, and aria-busy holds it back, so
each now has text inside and Home announces once. Settings, Search and chat gain the main landmark.

Author: waleedlatif1

apps/sim/platform/design-system/components/status/query-boundary.tsx

@@ -13,6 +13,7 @@ interface LoadingRowsProps {
 export function LoadingRows({ label, rows = 3 }: LoadingRowsProps) {
   return (
     <div className={styles.loadingRows} role='status' aria-label={label}>
+      <span data-visually-hidden>{label}</span>
       {Array.from({ length: rows }, (_, index) => (
         <div key={index} className={styles.loadingRow} aria-hidden='true'>
           <span className={styles.loadingLabel} />

apps/sim/platform/embedded/app/(shell)/_components/conversation/landing.tsx

@@ -11,7 +11,7 @@ interface ConversationLandingProps {
 /** A conversation's first view, on the same lines as the Search view beside it. */
 export function ConversationLanding({ heading, children }: ConversationLandingProps) {
   return (
-    <div className={styles.landingScroll}>
+    <main className={styles.landingScroll}>
       <div className={styles.landing}>
         <Surface>
           <h1 className={styles.landingHeading} data-type='T076'>
@@ -20,6 +20,6 @@ export function ConversationLanding({ heading, children }: ConversationLandingPr
         </Surface>
         <div className={styles.landingField}>{children}</div>
       </div>
-    </div>
+    </main>
   )
 }

apps/sim/platform/embedded/app/(shell)/_components/conversation/page-conversation.tsx

@@ -128,16 +128,18 @@ function PageConversationContent({
           )}
         >
           {hasChat ? (
-            <AssistantActionReviewProvider {...reviewProps}>
-              <MothershipChat
-                {...threadProps}
-                className={cn(hostBridge.palette, styles.thread)}
-                reserveResourceHeader={!header && threadProps.reserveResourceHeader}
-                SearchConnectionComponent={SearchIntegrationConnection}
-                composer={composer}
-                initialScrollBlocked={panel.initialScrollBlocked}
-              />
-            </AssistantActionReviewProvider>
+            <main className='contents'>
+              <AssistantActionReviewProvider {...reviewProps}>
+                <MothershipChat
+                  {...threadProps}
+                  className={cn(hostBridge.palette, styles.thread)}
+                  reserveResourceHeader={!header && threadProps.reserveResourceHeader}
+                  SearchConnectionComponent={SearchIntegrationConnection}
+                  composer={composer}
+                  initialScrollBlocked={panel.initialScrollBlocked}
+                />
+              </AssistantActionReviewProvider>
+            </main>
           ) : (
             landing?.({ requestMode, composer })
           )}

apps/sim/platform/embedded/app/(shell)/home/_components/home-dashboard/home-dashboard-skeleton.tsx

@@ -21,9 +21,12 @@ export function HomeDashboardSkeleton() {
     searchAccess.memberScoped &&
     ((viewer.canConnectSearchIntegrations && connectedAccountsAvailable) || viewer.canUseSearchMcp)
   return (
-    <div className={styles.scroller} aria-busy='true'>
+    <div className={styles.scroller}>
       <div className={styles.dashboard}>
         <Surface>
+          <span role='status' data-visually-hidden>
+            Loading Home
+          </span>
           <div className={styles.lead}>
             <div className={styles.placeholderGreeting} />
             <div className={styles.placeholderWordmark} />
@@ -36,17 +39,17 @@ export function HomeDashboardSkeleton() {
         </Surface>
         <Surface>
           <div className={styles.sections}>
-            {searchAccess.memberScoped && <SkeletonLane label='Loading recents' />}
+            {searchAccess.memberScoped && <SkeletonLane label='Loading recents' silent />}
             {showsGetStarted && <div className={styles.placeholderGetStarted} />}
             <div className={styles.columns}>
               <div className={styles.column}>
-                {canBuild && <SkeletonBlock label='Loading activity' />}
-                <SkeletonBlock label='Loading what needs your attention' />
-                {canBuild && <WidgetSkeleton label='Loading workspaces' glyph={false} />}
+                {canBuild && <SkeletonBlock label='Loading activity' silent />}
+                <SkeletonBlock label='Loading what needs your attention' silent />
+                {canBuild && <WidgetSkeleton label='Loading workspaces' glyph={false} silent />}
               </div>
               <div className={styles.column}>
-                <SkeletonBlock label='Loading email' />
-                <SkeletonBlock label='Loading your calendar' />
+                <SkeletonBlock label='Loading email' silent />
+                <SkeletonBlock label='Loading your calendar' silent />
               </div>
             </div>
           </div>

apps/sim/platform/embedded/app/(shell)/home/_components/widget-skeleton/widget-skeleton.tsx

@@ -8,12 +8,36 @@ interface WidgetSkeletonProps {
   rows?: number
   /** Whether the list's rows lead with a glyph. */
   glyph?: boolean
+  /** A page's skeleton announces itself once, rather than per block. */
+  silent?: boolean
+}
+
+interface SkeletonPlaceholderProps {
+  label: string
+  silent?: boolean
+}
+
+/** Text a live region can announce, since these shapes say nothing. */
+function announcement(label: string, silent: boolean | undefined) {
+  return silent
+    ? { props: { 'aria-hidden': true as const }, text: null }
+    : {
+        props: { role: 'status', 'aria-label': label },
+        text: <span data-visually-hidden>{label}</span>,
+      }
 }
 
 /** Holds a widget's list at its final size, so the page does not move when the data arrives. */
-export function WidgetSkeleton({ label, rows = ROW_COUNT, glyph = true }: WidgetSkeletonProps) {
+export function WidgetSkeleton({
+  label,
+  rows = ROW_COUNT,
+  glyph = true,
+  silent,
+}: WidgetSkeletonProps) {
+  const { props, text } = announcement(label, silent)
   return (
-    <div className={styles.rows} role='status' aria-label={label} aria-busy='true'>
+    <div className={styles.rows} {...props}>
+      {text}
       {Array.from({ length: rows }, (_, index) => (
         <span key={index} className={styles.row}>
           {glyph && <i className={styles.glyph} />}
@@ -28,14 +52,21 @@ export function WidgetSkeleton({ label, rows = ROW_COUNT, glyph = true }: Widget
 }
 
 /** The same fill for a chart or schedule, whose shape has no rows. */
-export function SkeletonBlock({ label }: { label: string }) {
-  return <div className={styles.block} role='status' aria-label={label} aria-busy='true' />
+export function SkeletonBlock({ label, silent }: SkeletonPlaceholderProps) {
+  const { props, text } = announcement(label, silent)
+  return (
+    <div className={styles.block} {...props}>
+      {text}
+    </div>
+  )
 }
 
 /** A recents lane holding its height until the history read settles. */
-export function SkeletonLane({ label }: { label: string }) {
+export function SkeletonLane({ label, silent }: SkeletonPlaceholderProps) {
+  const { props, text } = announcement(label, silent)
   return (
-    <div className={styles.lane} role='status' aria-label={label} aria-busy='true'>
+    <div className={styles.lane} {...props}>
+      {text}
       <i />
       <i />
       <i />

apps/sim/platform/embedded/app/(shell)/search/_components/search-surface/search-surface.tsx

@@ -199,7 +199,7 @@ function OrganizationSearchSurfaceContent({ userId, chatId }: OrganizationSearch
         </Suspense>
       }
     >
-      <div className={styles.body}>
+      <main className={styles.body}>
         <Surface>
           {query ? (
             <div className={styles.docked}>
@@ -229,7 +229,7 @@ function OrganizationSearchSurfaceContent({ userId, chatId }: OrganizationSearch
             </div>
           )}
         </Surface>
-      </div>
+      </main>
     </SearchFrame>
   )
 }

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/usage/usage-heatmap.tsx

@@ -142,7 +142,9 @@ export function UsageCalendar({ organizationId, timezone, workspaceId }: UsageCa
       {calendar.failed ? (
         <FailureNotice message='Could not load daily usage' onRetry={calendar.retry} />
       ) : !calendar.days ? (
-        <span className={styles.listPlaceholder} role='status' aria-label='Loading daily usage' />
+        <span className={styles.listPlaceholder} role='status' aria-label='Loading daily usage'>
+          <span data-visually-hidden>Loading daily usage</span>
+        </span>
       ) : (
         <Heatmap days={calendar.days} />
       )}

apps/sim/platform/embedded/app/(shell)/settings/_components/settings-screen/settings-screen.tsx

@@ -40,7 +40,7 @@ interface SettingsScreenProps {
 /** A section's scrolling page: heading, description, docs link, then its cards. */
 export function SettingsScreen({ title, description, docsHref, children }: SettingsScreenProps) {
   return (
-    <div className={styles.body}>
+    <main className={styles.body}>
       <div className={styles.content}>
         <header className={styles.heading}>
           <div className={styles.title}>
@@ -65,6 +65,6 @@ export function SettingsScreen({ title, description, docsHref, children }: Setti
         </header>
         {children}
       </div>
-    </div>
+    </main>
   )
 }