From cb77688572dc80abdd0727a69e265ccaf212b855 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Fri, 16 Jan 2026 15:51:31 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20add=20accessible?=
 =?UTF-8?q?=20back=20button=20in=20side=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

label the back button and separate it from the heading for a11y
---
 CHANGELOG.md                                  |  9 ++++-
 .../rooms/livekit/components/SidePanel.tsx    | 40 +++++++++++--------
 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 +
 6 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cea017e8..ddec38ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,9 +8,14 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- ♿️(frontend) add accessible back button in side panel #881
+
 ### Fixed
 
-🔒(backend) prevent automatic upgrade setuptools
+- 🔒(backend) prevent automatic upgrade setuptools
+
 
 ## [1.3.0] - 2026-01-13
 
@@ -30,7 +35,7 @@ and this project adheres to
 
 ### Fixed
 
-- 🐛(frontend) remove unexpected F2 tooltip when clicking video screen 
+- 🐛(frontend) remove unexpected F2 tooltip when clicking video screen
 - 🩹(frontend) icon font loading to avoid text/icon flickering
 
 ## [1.2.0] - 2026-01-05
diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
index 542b1e2b..e10bc126 100644
--- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
@@ -13,6 +13,7 @@ import { Effects } from './effects/Effects'
 import { Admin } from './Admin'
 import { Tools } from './Tools'
 import { Info } from './Info'
+import { HStack } from '@/styled-system/jsx'
 
 type StyledSidePanelProps = {
   title: string
@@ -23,6 +24,7 @@ type StyledSidePanelProps = {
   closeButtonTooltip: string
   isSubmenu: boolean
   onBack: () => void
+  backButtonLabel: string
 }
 
 const StyledSidePanel = ({
@@ -34,6 +36,7 @@ const StyledSidePanel = ({
   closeButtonTooltip,
   isSubmenu = false,
   onBack,
+  backButtonLabel,
 }: StyledSidePanelProps) => (
   <aside
     className={css({
@@ -63,31 +66,34 @@ const StyledSidePanel = ({
     aria-hidden={isClosed}
     aria-label={ariaLabel}
   >
-    <Heading
-      slot="title"
-      level={1}
-      className={text({ variant: 'h2' })}
-      style={{
-        paddingLeft: '1.5rem',
-        paddingTop: '1rem',
-        display: isClosed ? 'none' : 'flex',
-        justifyContent: 'start',
-        alignItems: 'center',
-      }}
-    >
+    <HStack alignItems="center">
       {isSubmenu && (
         <Button
           variant="secondaryText"
           size="sm"
           square
-          className={css({ marginRight: '0.5rem' })}
+          className={css({ marginRight: '0.5rem', marginLeft: '1rem' })}
+          aria-label={backButtonLabel}
           onPress={onBack}
         >
-          <RiArrowLeftLine size={20} />
+          <RiArrowLeftLine size={20} aria-hidden="true" />
         </Button>
       )}
-      {title}
-    </Heading>
+      <Heading
+        slot="title"
+        level={1}
+        className={text({ variant: 'h2' })}
+        style={{
+          paddingLeft: isSubmenu ? 0 : '1.5rem',
+          paddingTop: '1rem',
+          display: isClosed ? 'none' : 'flex',
+          justifyContent: 'start',
+          alignItems: 'center',
+        }}
+      >
+        {title}
+      </Heading>
+    </HStack>
     <Div
       position="absolute"
       top="5"
@@ -129,7 +135,6 @@ const Panel = ({ isOpen, keepAlive = false, children }: PanelProps) => (
     {keepAlive || isOpen ? children : null}
   </div>
 )
-
 export const SidePanel = () => {
   const {
     activePanelId,
@@ -158,6 +163,7 @@ export const SidePanel = () => {
       })}
       isClosed={!isSidePanelOpen}
       isSubmenu={isSubPanelOpen}
+      backButtonLabel={t('backToTools')}
       onBack={() => (layoutStore.activeSubPanelId = null)}
     >
       <Panel isOpen={isParticipantsOpen}>
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 09409669..60ed5c36 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -277,6 +277,7 @@
   },
   "sidePanel": {
     "ariaLabel": "Seitenleiste",
+    "backToTools": "Zurück zu den Meeting-Tools",
     "heading": {
       "participants": "Teilnehmer",
       "effects": "Effekte",
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index c2b9b247..70842a79 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -277,6 +277,7 @@
   },
   "sidePanel": {
     "ariaLabel": "Sidepanel",
+    "backToTools": "Back to meeting tools",
     "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 b03a148a..98543bc7 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -277,6 +277,7 @@
   },
   "sidePanel": {
     "ariaLabel": "Panneau latéral",
+    "backToTools": "Retour aux outils de réunion",
     "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 1a74da3b..e8b571bc 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -277,6 +277,7 @@
   },
   "sidePanel": {
     "ariaLabel": "Zijbalk",
+    "backToTools": "Terug naar vergadertools",
     "heading": {
       "participants": "Deelnemers",
       "effects": "Effecten",