♿️(frontend) enhance sidepanel navigation accessibility

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

@@ -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
 

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)

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)

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)

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

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)

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>
   )
 }