From 660b022eb174ce4917ec8c441fb734d2a34ba485 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 27 Mar 2026 19:21:36 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20enhance=20sidepa?=
 =?UTF-8?q?nel=20navigation=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mark the more options area as an explicit navigation
region for screen readers.

Update each sidepanel toggle to use `aria-expanded` to indicate
whether the panel is open, improving accessibility feedback.

Also, avoid render for screen reader the number of participants
as it's already added the the aria label
---
 CHANGELOG.md                                                  | 3 +++
 .../src/features/rooms/livekit/components/AdminToggle.tsx     | 1 +
 .../features/rooms/livekit/components/controls/ChatToggle.tsx | 1 +
 .../features/rooms/livekit/components/controls/InfoToggle.tsx | 1 +
 .../components/controls/Participants/ParticipantsToggle.tsx   | 2 ++
 .../rooms/livekit/components/controls/ToolsToggle.tsx         | 1 +
 .../features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx | 4 ++--
 7 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 181a3125..74b4ee8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,9 @@ and this project adheres to
 ### Changed
 
 - ⬆️(dependencies) update python dependencies
+- ♿️(frontend) add explicit region for call controls #1216
+- ♿️(frontend) improve accessibility of the reaction toolbar #1216
+- ♿️(frontend) enhance sidepanel navigation accessibility #1216
 
 ### Fixed
 
diff --git a/src/frontend/src/features/rooms/livekit/components/AdminToggle.tsx b/src/frontend/src/features/rooms/livekit/components/AdminToggle.tsx
index 047fc5f3..049991f6 100644
--- a/src/frontend/src/features/rooms/livekit/components/AdminToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/AdminToggle.tsx
@@ -32,6 +32,7 @@ export const AdminToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isAdminOpen}
+        aria-expanded={isAdminOpen}
         onPress={(e) => {
           toggleAdmin()
           onPress?.(e)
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
index 130151f7..80742b09 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ChatToggle.tsx
@@ -37,6 +37,7 @@ export const ChatToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isChatOpen}
+        aria-expanded={isChatOpen}
         onPress={(e) => {
           toggleChat()
           onPress?.(e)
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/InfoToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/InfoToggle.tsx
index 2f61921b..20a2603f 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/InfoToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/InfoToggle.tsx
@@ -27,6 +27,7 @@ export const InfoToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isInfoOpen}
+        aria-expanded={isInfoOpen}
         onPress={(e) => {
           toggleInfo()
           onPress?.(e)
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
index 056831f6..1ac9f87e 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx
@@ -48,6 +48,7 @@ export const ParticipantsToggle = ({
             count: announcedCount,
           })}.`}
           isSelected={isParticipantsOpen}
+          aria-expanded={isParticipantsOpen}
           onPress={(e) => {
             toggleParticipants()
             onPress?.(e)
@@ -76,6 +77,7 @@ export const ParticipantsToggle = ({
           zIndex: 1,
           userSelect: 'none',
         })}
+        aria-hidden={true}
       >
         {numParticipants < 100 ? (
           numParticipants || 1
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx
index 668c7251..d43bcb29 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/ToolsToggle.tsx
@@ -34,6 +34,7 @@ export const ToolsToggle = ({
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isToolsOpen}
+        aria-expanded={isToolsOpen}
         onPress={(e) => {
           toggleTools()
           onPress?.(e)
diff --git a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
index a391627a..b52558a4 100644
--- a/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
+++ b/src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MoreOptions.tsx
@@ -73,7 +73,7 @@ export const MoreOptions = ({
 }) => {
   const { width: parentWidth } = useSize(parentElement)
   return (
-    <div
+    <nav
       className={css({
         display: 'flex',
         justifyContent: 'flex-end',
@@ -88,6 +88,6 @@ export const MoreOptions = ({
       ) : (
         <LateralMenu />
       )}
-    </div>
+    </nav>
   )
 }