From abd90ab980f261f003e109f43ccade3fef60802f Mon Sep 17 00:00:00 2001
From: Lotus Bot <lotus@lotusguild.org>
Date: Thu, 21 May 2026 13:04:11 -0400
Subject: [PATCH] fix(a11y): fix remaining unlabeled icon buttons and portaled
 tooltip issue\n\nCo-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---
 src/app/components/emoji-board/components/Sidebar.tsx | 4 ++--
 src/app/features/call/CallControls.tsx                | 4 +++-
 src/app/features/lobby/Lobby.tsx                      | 1 -
 src/app/features/lobby/LobbyHeader.tsx                | 4 +++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/components/emoji-board/components/Sidebar.tsx b/src/app/components/emoji-board/components/Sidebar.tsx
index de22b4832..be8065604 100644
--- a/src/app/components/emoji-board/components/Sidebar.tsx
+++ b/src/app/components/emoji-board/components/Sidebar.tsx
@@ -61,7 +61,7 @@ function SidebarBtn<T extends string>({
       delay={500}
       position="Left"
       tooltip={
-        <Tooltip id={`SidebarStackItem-${id}-label`}>
+        <Tooltip>
           <Text size="T300">{label}</Text>
         </Tooltip>
       }
@@ -69,7 +69,7 @@ function SidebarBtn<T extends string>({
       {(ref) => (
         <IconButton
           aria-pressed={active}
-          aria-labelledby={`SidebarStackItem-${id}-label`}
+          aria-label={label}
           ref={ref}
           onClick={() => onClick(id)}
           size="400"
diff --git a/src/app/features/call/CallControls.tsx b/src/app/features/call/CallControls.tsx
index 31f45d9a5..debe02909 100644
--- a/src/app/features/call/CallControls.tsx
+++ b/src/app/features/call/CallControls.tsx
@@ -351,7 +351,9 @@ export function CallControls({ callEmbed }: CallControlsProps) {
                 size="400"
                 onClick={handleOpenMenu}
                 outlined
-                aria-pressed={!!cords}
+                aria-label="More options"
+                aria-expanded={!!cords}
+                aria-haspopup="menu"
               >
                 <Icon size="400" src={Icons.VerticalDots} />
               </IconButton>
diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx
index 0e3c79141..0eff1dae4 100644
--- a/src/app/features/lobby/Lobby.tsx
+++ b/src/app/features/lobby/Lobby.tsx
@@ -451,7 +451,6 @@ export function Lobby() {
                       radii="Pill"
                       outlined
                       size="300"
-                      aria-label="Scroll to Top"
                     >
                       <Icon src={Icons.ChevronTop} size="300" />
                     </IconButton>
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index 941a75b36..75c543058 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -244,7 +244,9 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
                 fill="None"
                 onClick={handleOpenMenu}
                 ref={triggerRef}
-                aria-pressed={!!menuAnchor}
+                aria-label="More options"
+                aria-expanded={!!menuAnchor}
+                aria-haspopup="menu"
               >
                 <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
               </IconButton>