From 3cd5c77f424251cc35efc1e1c476d8fc36855c5e Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 13 Nov 2025 22:14:52 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20enhance=20sidepa?=
 =?UTF-8?q?nel=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use the appropriate HTML <aside> element for the side panel and enhance
it with the correct ARIA attributes to improve accessibility.
---
 .../features/rooms/livekit/components/SidePanel.tsx   | 11 ++++++++---
 src/frontend/src/locales/de/rooms.json                |  1 +
 src/frontend/src/locales/en/rooms.json                |  1 +
 src/frontend/src/locales/fr/rooms.json                |  1 +
 src/frontend/src/locales/nl/rooms.json                |  1 +
 5 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
index 3ca50e6e..542b1e2b 100644
--- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
@@ -16,6 +16,7 @@ import { Info } from './Info'
 
 type StyledSidePanelProps = {
   title: string
+  ariaLabel: string
   children: ReactNode
   onClose: () => void
   isClosed: boolean
@@ -26,6 +27,7 @@ type StyledSidePanelProps = {
 
 const StyledSidePanel = ({
   title,
+  ariaLabel,
   children,
   onClose,
   isClosed,
@@ -33,7 +35,7 @@ const StyledSidePanel = ({
   isSubmenu = false,
   onBack,
 }: StyledSidePanelProps) => (
-  <div
+  <aside
     className={css({
       borderWidth: '1px',
       borderStyle: 'solid',
@@ -58,6 +60,8 @@ const StyledSidePanel = ({
     style={{
       transform: isClosed ? 'translateX(calc(360px + 1.5rem))' : 'none',
     }}
+    aria-hidden={isClosed}
+    aria-label={ariaLabel}
   >
     <Heading
       slot="title"
@@ -74,7 +78,7 @@ const StyledSidePanel = ({
       {isSubmenu && (
         <Button
           variant="secondaryText"
-          size={'sm'}
+          size="sm"
           square
           className={css({ marginRight: '0.5rem' })}
           onPress={onBack}
@@ -104,7 +108,7 @@ const StyledSidePanel = ({
       </Button>
     </Div>
     {children}
-  </div>
+  </aside>
 )
 
 type PanelProps = {
@@ -144,6 +148,7 @@ export const SidePanel = () => {
   return (
     <StyledSidePanel
       title={t(`heading.${activeSubPanelId || activePanelId}`)}
+      ariaLabel={t('ariaLabel')}
       onClose={() => {
         layoutStore.activePanelId = null
         layoutStore.activeSubPanelId = null
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 19f823e5..102d30b9 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -270,6 +270,7 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Seitenleiste",
     "heading": {
       "participants": "Teilnehmer",
       "effects": "Effekte",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index 7f1b32d9..cda662e1 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -270,6 +270,7 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Sidepanel",
     "heading": {
       "participants": "Participants",
       "effects": "Backgrounds and Effects",
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 2adcc6ba..4f102435 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -270,6 +270,7 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Panneau latéral",
     "heading": {
       "participants": "Participants",
       "effects": "Arrière-plans et effets",
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index be7c0f25..eff87701 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -270,6 +270,7 @@
     }
   },
   "sidePanel": {
+    "ariaLabel": "Zijbalk",
     "heading": {
       "participants": "Deelnemers",
       "effects": "Effecten",