From e9d419f84ce26dbc8bff4c748291d169ac8f669b Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Fri, 18 Sep 2026 19:17:32 -0400
Subject: [PATCH] a11y: give every icon-only sidebar avatar button and the
 message sender avatar an accessible name (#185)

axe-core flagged 18 'button-name' criticals on the room view: the space
tabs, Home/Direct/Inbox/Search/Saved/Explore/Add Space/User Settings/
Unverified sidebar buttons, and each message's avatar button had no text
for screen readers. Labels mirror the existing tooltips; message avatars
read '<name>, open profile'. Room view now has zero button-name findings.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
---
 src/app/features/room/message/Message.tsx      | 1 +
 src/app/pages/client/sidebar/BookmarksTab.tsx  | 8 +++++++-
 src/app/pages/client/sidebar/CreateTab.tsx     | 1 +
 src/app/pages/client/sidebar/DirectTab.tsx     | 1 +
 src/app/pages/client/sidebar/ExploreTab.tsx    | 8 +++++++-
 src/app/pages/client/sidebar/HomeTab.tsx       | 1 +
 src/app/pages/client/sidebar/InboxTab.tsx      | 8 +++++++-
 src/app/pages/client/sidebar/SearchTab.tsx     | 2 +-
 src/app/pages/client/sidebar/SettingsTab.tsx   | 7 ++++++-
 src/app/pages/client/sidebar/UnverifiedTab.tsx | 5 +++++
 10 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index f547e159a..f913fe0f9 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -1015,6 +1015,7 @@ export const Message = React.memo(
                 size="300"
                 data-user-id={senderId}
                 onClick={onUserClick}
+                aria-label={`${senderDisplayName}, open profile`}
               >
                 <UserAvatar
                   userId={senderId}
diff --git a/src/app/pages/client/sidebar/BookmarksTab.tsx b/src/app/pages/client/sidebar/BookmarksTab.tsx
index d69ef2f1d..678f9511d 100644
--- a/src/app/pages/client/sidebar/BookmarksTab.tsx
+++ b/src/app/pages/client/sidebar/BookmarksTab.tsx
@@ -13,7 +13,13 @@ export function BookmarksTab() {
     <SidebarItem active={opened}>
       <SidebarItemTooltip tooltip="Saved Messages">
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={toggle}>
+          <SidebarAvatar
+            as="button"
+            ref={triggerRef}
+            aria-label="Saved Messages"
+            outlined
+            onClick={toggle}
+          >
             <Icon src={Icons.Star} filled={opened} />
           </SidebarAvatar>
         )}
diff --git a/src/app/pages/client/sidebar/CreateTab.tsx b/src/app/pages/client/sidebar/CreateTab.tsx
index 8886da09a..57e660903 100644
--- a/src/app/pages/client/sidebar/CreateTab.tsx
+++ b/src/app/pages/client/sidebar/CreateTab.tsx
@@ -104,6 +104,7 @@ export function CreateTab() {
             <SidebarAvatar
               className={menuCords ? ContainerColor({ variant: 'Surface' }) : undefined}
               as="button"
+              aria-label="Add Space"
               ref={triggerRef}
               outlined
               onClick={handleMenu}
diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx
index dcd44e2f7..b2c750539 100644
--- a/src/app/pages/client/sidebar/DirectTab.tsx
+++ b/src/app/pages/client/sidebar/DirectTab.tsx
@@ -97,6 +97,7 @@ export function DirectTab() {
         {(triggerRef) => (
           <SidebarAvatar
             as="button"
+            aria-label="Direct Messages"
             ref={triggerRef}
             outlined
             onClick={handleDirectClick}
diff --git a/src/app/pages/client/sidebar/ExploreTab.tsx b/src/app/pages/client/sidebar/ExploreTab.tsx
index a45b58309..f91a2f940 100644
--- a/src/app/pages/client/sidebar/ExploreTab.tsx
+++ b/src/app/pages/client/sidebar/ExploreTab.tsx
@@ -54,7 +54,13 @@ export function ExploreTab() {
     <SidebarItem active={exploreSelected}>
       <SidebarItemTooltip tooltip="Explore Community">
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={handleExploreClick}>
+          <SidebarAvatar
+            as="button"
+            ref={triggerRef}
+            aria-label="Explore Community"
+            outlined
+            onClick={handleExploreClick}
+          >
             <Icon src={Icons.Explore} filled={exploreSelected} />
           </SidebarAvatar>
         )}
diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx
index 778b729e2..cc12ac9e0 100644
--- a/src/app/pages/client/sidebar/HomeTab.tsx
+++ b/src/app/pages/client/sidebar/HomeTab.tsx
@@ -99,6 +99,7 @@ export function HomeTab() {
         {(triggerRef) => (
           <SidebarAvatar
             as="button"
+            aria-label="Home"
             ref={triggerRef}
             outlined
             onClick={handleHomeClick}
diff --git a/src/app/pages/client/sidebar/InboxTab.tsx b/src/app/pages/client/sidebar/InboxTab.tsx
index 5d13a9ab6..66235fbae 100644
--- a/src/app/pages/client/sidebar/InboxTab.tsx
+++ b/src/app/pages/client/sidebar/InboxTab.tsx
@@ -47,7 +47,13 @@ export function InboxTab() {
     <SidebarItem active={inboxSelected}>
       <SidebarItemTooltip tooltip="Inbox">
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={handleInboxClick}>
+          <SidebarAvatar
+            as="button"
+            ref={triggerRef}
+            aria-label="Inbox"
+            outlined
+            onClick={handleInboxClick}
+          >
             <Icon src={Icons.Inbox} filled={inboxSelected} />
           </SidebarAvatar>
         )}
diff --git a/src/app/pages/client/sidebar/SearchTab.tsx b/src/app/pages/client/sidebar/SearchTab.tsx
index 7ceb5c499..db6d9529e 100644
--- a/src/app/pages/client/sidebar/SearchTab.tsx
+++ b/src/app/pages/client/sidebar/SearchTab.tsx
@@ -13,7 +13,7 @@ export function SearchTab() {
     <SidebarItem active={opened}>
       <SidebarItemTooltip tooltip="Search">
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} outlined onClick={open}>
+          <SidebarAvatar as="button" ref={triggerRef} aria-label="Search" outlined onClick={open}>
             <Icon src={Icons.Search} filled={opened} />
           </SidebarAvatar>
         )}
diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index 67eb6f9d8..39cb3c86a 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -184,7 +184,12 @@ export function SettingsTab() {
     <SidebarItem active={settingsOpen}>
       <SidebarItemTooltip tooltip="User Settings">
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} onClick={() => setSettingsOpen(true)}>
+          <SidebarAvatar
+            as="button"
+            ref={triggerRef}
+            aria-label="User Settings"
+            onClick={() => setSettingsOpen(true)}
+          >
             <UserAvatar
               userId={userId}
               src={avatarUrl}
diff --git a/src/app/pages/client/sidebar/UnverifiedTab.tsx b/src/app/pages/client/sidebar/UnverifiedTab.tsx
index f8e582f65..1da7a30a5 100644
--- a/src/app/pages/client/sidebar/UnverifiedTab.tsx
+++ b/src/app/pages/client/sidebar/UnverifiedTab.tsx
@@ -54,6 +54,11 @@ function UnverifiedIndicator() {
               <SidebarAvatar
                 className={unverified ? css.UnverifiedAvatar : css.UnverifiedOtherAvatar}
                 as="button"
+                aria-label={
+                  unverified
+                    ? 'Unverified device — open settings'
+                    : 'Other unverified devices — open settings'
+                }
                 ref={triggerRef}
                 outlined
                 onClick={() => setSettings(true)}