From 4490993fe785b2bd95ec720f5868aee16d33e7c9 Mon Sep 17 00:00:00 2001
From: Lotus Bot <lotus@lotusguild.org>
Date: Wed, 20 May 2026 21:44:41 -0400
Subject: [PATCH] feat(a11y): landmark regions, skip link, dialog labels, icon
 button labels

C-3: nav/main landmark roles in ClientLayout (nav + main areas)
C-4: Skip-to-main-content link in ClientLayout (visually hidden, focusable)
H-2: aria-labelledby on LeaveRoomPrompt and RoomTopicViewer dialogs
C-1: aria-label on ~15 icon-only buttons (back, menu, close, folder, account)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../leave-room-prompt/LeaveRoomPrompt.tsx     |  4 +--
 .../room-topic-viewer/RoomTopicViewer.tsx     |  3 +-
 src/app/pages/client/ClientLayout.tsx         | 28 ++++++++++++++++---
 src/app/pages/client/ClientRoot.tsx           |  1 +
 src/app/pages/client/direct/Direct.tsx        |  2 +-
 src/app/pages/client/direct/DirectCreate.tsx  |  2 +-
 src/app/pages/client/explore/Explore.tsx      |  2 +-
 src/app/pages/client/explore/Featured.tsx     |  2 +-
 src/app/pages/client/explore/Server.tsx       |  2 +-
 src/app/pages/client/home/CreateRoom.tsx      |  2 +-
 src/app/pages/client/home/Home.tsx            |  2 +-
 src/app/pages/client/home/Search.tsx          |  2 +-
 src/app/pages/client/inbox/Invites.tsx        |  2 +-
 src/app/pages/client/inbox/Notifications.tsx  |  2 +-
 src/app/pages/client/sidebar/SpaceTabs.tsx    |  2 +-
 src/app/pages/client/space/Search.tsx         |  2 +-
 src/app/pages/client/space/Space.tsx          |  2 +-
 17 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
index 74244dde1..b7f0473be 100644
--- a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
+++ b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
@@ -56,7 +56,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
             escapeDeactivates: stopPropagation,
           }}
         >
-          <Dialog variant="Surface">
+          <Dialog variant="Surface" aria-labelledby="leave-room-dialog-title">
             <Header
               style={{
                 padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -66,7 +66,7 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">Leave Room</Text>
+                <Text size="H4" id="leave-room-dialog-title">Leave Room</Text>
               </Box>
               <IconButton size="300" onClick={onCancel} radii="300" aria-label="Cancel">
                 <Icon src={Icons.Cross} />
diff --git a/src/app/components/room-topic-viewer/RoomTopicViewer.tsx b/src/app/components/room-topic-viewer/RoomTopicViewer.tsx
index c6eae43f4..0b0927ac8 100644
--- a/src/app/components/room-topic-viewer/RoomTopicViewer.tsx
+++ b/src/app/components/room-topic-viewer/RoomTopicViewer.tsx
@@ -17,12 +17,13 @@ export const RoomTopicViewer = as<
     size="300"
     flexHeight
     className={classNames(css.ModalFlex, className)}
+    aria-labelledby="room-topic-title"
     {...props}
     ref={ref}
   >
     <Header className={css.ModalHeader} variant="Surface" size="500">
       <Box grow="Yes">
-        <Text size="H4" truncate>
+        <Text size="H4" truncate id="room-topic-title">
           {name}
         </Text>
       </Box>
diff --git a/src/app/pages/client/ClientLayout.tsx b/src/app/pages/client/ClientLayout.tsx
index 4a077ba6a..d136d0f99 100644
--- a/src/app/pages/client/ClientLayout.tsx
+++ b/src/app/pages/client/ClientLayout.tsx
@@ -7,9 +7,29 @@ type ClientLayoutProps = {
 };
 export function ClientLayout({ nav, children }: ClientLayoutProps) {
   return (
-    <Box grow="Yes">
-      <Box shrink="No">{nav}</Box>
-      <Box grow="Yes">{children}</Box>
-    </Box>
+    <>
+      <a
+        href="#main-content"
+        style={{
+          position: 'absolute',
+          top: '-40px',
+          left: 0,
+          padding: '8px 16px',
+          background: '#000',
+          color: '#fff',
+          zIndex: 9999,
+          borderRadius: '0 0 4px 0',
+          transition: 'top 0.1s',
+        }}
+        onFocus={(e) => { (e.currentTarget as HTMLElement).style.top = '0'; }}
+        onBlur={(e) => { (e.currentTarget as HTMLElement).style.top = '-40px'; }}
+      >
+        Skip to main content
+      </a>
+      <Box grow="Yes">
+        <Box shrink="No" as="nav" aria-label="Room navigation">{nav}</Box>
+        <Box grow="Yes" as="main" id="main-content">{children}</Box>
+      </Box>
+    </>
   );
 }
diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index 93f0526e3..5a6120dd5 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -69,6 +69,7 @@ function ClientRootOptions({ mx }: { mx?: MatrixClient }) {
       variant="Background"
       fill="None"
       onClick={handleToggle}
+      aria-label="Account options"
     >
       <Icon size="200" src={Icons.VerticalDots} />
       <PopOut
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 04edf1090..e125df0f0 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -107,7 +107,7 @@ function DirectHeader() {
             </Text>
           </Box>
           <Box>
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu} aria-label="Direct messages options">
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>
diff --git a/src/app/pages/client/direct/DirectCreate.tsx b/src/app/pages/client/direct/DirectCreate.tsx
index 3deb0b6dd..683aa57f1 100644
--- a/src/app/pages/client/direct/DirectCreate.tsx
+++ b/src/app/pages/client/direct/DirectCreate.tsx
@@ -44,7 +44,7 @@ export function DirectCreate() {
           <Box grow="Yes" alignItems="Center" gap="200">
             <BackRouteHandler>
               {(onBack) => (
-                <IconButton onClick={onBack}>
+                <IconButton onClick={onBack} aria-label="Back">
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
               )}
diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx
index dae831668..24036be0c 100644
--- a/src/app/pages/client/explore/Explore.tsx
+++ b/src/app/pages/client/explore/Explore.tsx
@@ -96,7 +96,7 @@ export function AddServer() {
                 <Box grow="Yes">
                   <Text size="H4">Add Server</Text>
                 </Box>
-                <IconButton size="300" onClick={() => setDialog(false)} radii="300">
+                <IconButton size="300" onClick={() => setDialog(false)} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>
diff --git a/src/app/pages/client/explore/Featured.tsx b/src/app/pages/client/explore/Featured.tsx
index f056cbb5c..b47fef4c6 100644
--- a/src/app/pages/client/explore/Featured.tsx
+++ b/src/app/pages/client/explore/Featured.tsx
@@ -33,7 +33,7 @@ export function FeaturedRooms() {
           <Box shrink="No">
             <BackRouteHandler>
               {(onBack) => (
-                <IconButton onClick={onBack}>
+                <IconButton onClick={onBack} aria-label="Back">
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
               )}
diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx
index 48f267ccd..1279bfb67 100644
--- a/src/app/pages/client/explore/Server.tsx
+++ b/src/app/pages/client/explore/Server.tsx
@@ -499,7 +499,7 @@ export function PublicRooms() {
               {screenSize === ScreenSize.Mobile && (
                 <BackRouteHandler>
                   {(onBack) => (
-                    <IconButton onClick={onBack}>
+                    <IconButton onClick={onBack} aria-label="Back">
                       <Icon src={Icons.ArrowLeft} />
                     </IconButton>
                   )}
diff --git a/src/app/pages/client/home/CreateRoom.tsx b/src/app/pages/client/home/CreateRoom.tsx
index fddd75aac..bb733d0fb 100644
--- a/src/app/pages/client/home/CreateRoom.tsx
+++ b/src/app/pages/client/home/CreateRoom.tsx
@@ -25,7 +25,7 @@ export function HomeCreateRoom() {
           <Box grow="Yes" alignItems="Center" gap="200">
             <BackRouteHandler>
               {(onBack) => (
-                <IconButton onClick={onBack}>
+                <IconButton onClick={onBack} aria-label="Back">
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
               )}
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index d87db963d..c216742c4 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -121,7 +121,7 @@ function HomeHeader() {
             </Text>
           </Box>
           <Box>
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu} aria-label="Home options">
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>
diff --git a/src/app/pages/client/home/Search.tsx b/src/app/pages/client/home/Search.tsx
index d5ddfb778..e76e9d537 100644
--- a/src/app/pages/client/home/Search.tsx
+++ b/src/app/pages/client/home/Search.tsx
@@ -19,7 +19,7 @@ export function HomeSearch() {
             {screenSize === ScreenSize.Mobile && (
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton onClick={onBack}>
+                  <IconButton onClick={onBack} aria-label="Back">
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}
diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx
index 20518e568..5e87b28a1 100644
--- a/src/app/pages/client/inbox/Invites.tsx
+++ b/src/app/pages/client/inbox/Invites.tsx
@@ -753,7 +753,7 @@ export function Invites() {
             {screenSize === ScreenSize.Mobile && (
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton onClick={onBack}>
+                  <IconButton onClick={onBack} aria-label="Back">
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index 9592224f8..7e999ed68 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -642,7 +642,7 @@ export function Notifications() {
             {screenSize === ScreenSize.Mobile && (
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton onClick={onBack}>
+                  <IconButton onClick={onBack} aria-label="Back">
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 6fc528a10..7a874b8da 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -522,7 +522,7 @@ function OpenedSpaceFolder({ folder, onClose, children }: OpenedSpaceFolderProps
     >
       <SidebarFolderDropTarget ref={aboveTargetRef} position="Top" />
       <SidebarAvatar size="300">
-        <IconButton data-id={folder.id} size="300" variant="Background" onClick={onClose}>
+        <IconButton data-id={folder.id} size="300" variant="Background" onClick={onClose} aria-label="Close folder">
           <Icon size="400" src={Icons.ChevronTop} filled />
         </IconButton>
       </SidebarAvatar>
diff --git a/src/app/pages/client/space/Search.tsx b/src/app/pages/client/space/Search.tsx
index 017262b5b..12ceddad5 100644
--- a/src/app/pages/client/space/Search.tsx
+++ b/src/app/pages/client/space/Search.tsx
@@ -34,7 +34,7 @@ export function SpaceSearch() {
             {screenSize === ScreenSize.Mobile && (
               <BackRouteHandler>
                 {(onBack) => (
-                  <IconButton onClick={onBack}>
+                  <IconButton onClick={onBack} aria-label="Back">
                     <Icon src={Icons.ArrowLeft} />
                   </IconButton>
                 )}
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 2a7c61993..1f18afe4e 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -273,7 +273,7 @@ function SpaceHeader() {
             {joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
           </Box>
           <Box shrink="No">
-            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
+            <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu} aria-label="Space options">
               <Icon src={Icons.VerticalDots} size="200" />
             </IconButton>
           </Box>