From de3e1a56a8e48314e9361eb19f20257f7b0b05a5 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 7 Jan 2026 13:07:54 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20placeholder=20for?=
 =?UTF-8?q?=20accessibility=20menu=20in=20settings=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

prepares UI for future accessibility options without implementing logic yet
---
 .../components/SettingsDialogExtended.tsx     |  8 +++++
 .../components/tabs/AccessibilityTab.tsx      | 29 +++++++++++++++++++
 src/frontend/src/features/settings/type.ts    |  1 +
 src/frontend/src/locales/en/settings.json     |  1 +
 src/frontend/src/locales/fr/settings.json     |  1 +
 5 files changed, 40 insertions(+)
 create mode 100644 src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx

diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index a67776d0..7018f90d 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -11,6 +11,7 @@ import {
   RiSettings3Line,
   RiSpeakerLine,
   RiVideoOnLine,
+  RiEyeLine,
 } from '@remixicon/react'
 import { AccountTab } from './tabs/AccountTab'
 import { NotificationsTab } from './tabs/NotificationsTab'
@@ -22,6 +23,7 @@ import { useRef } from 'react'
 import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner'
+import AccessibilityTab from './tabs/AccessibilityTab'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -112,6 +114,11 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
                   t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)}
               </Tab>
             )}
+            <Tab icon highlight id={SettingsDialogExtendedKey.ACCESSIBILITY}>
+              <RiEyeLine />
+              {isWideScreen &&
+                t(`tabs.${SettingsDialogExtendedKey.ACCESSIBILITY}`)}
+            </Tab>
           </TabList>
         </div>
         <div className={tabPanelContainerStyle}>
@@ -125,6 +132,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
           <NotificationsTab id={SettingsDialogExtendedKey.NOTIFICATIONS} />
           {/* Transcription tab won't be accessible if the tab is not active in the tab list */}
           <TranscriptionTab id={SettingsDialogExtendedKey.TRANSCRIPTION} />
+          <AccessibilityTab id={SettingsDialogExtendedKey.ACCESSIBILITY} />
         </div>
       </Tabs>
     </Dialog>
diff --git a/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx
new file mode 100644
index 00000000..7509a049
--- /dev/null
+++ b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx
@@ -0,0 +1,29 @@
+import { Field, H } from '@/primitives'
+import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+
+export type AccessibilityTabProps = Pick<TabPanelProps, 'id'>
+
+export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
+  const { t } = useTranslation('settings', { keyPrefix: 'tabs' })
+
+  return (
+    <TabPanel padding={'md'} flex id={id}>
+      <H lvl={2}>{t('accessibility')}</H>
+      <ul
+        className={css({
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        })}
+      >
+        <li>
+          <Field type="switch" label={t('accessibility.label')} />
+        </li>
+      </ul>
+    </TabPanel>
+  )
+}
+
+export default AccessibilityTab
diff --git a/src/frontend/src/features/settings/type.ts b/src/frontend/src/features/settings/type.ts
index 0a1af14f..93428717 100644
--- a/src/frontend/src/features/settings/type.ts
+++ b/src/frontend/src/features/settings/type.ts
@@ -5,4 +5,5 @@ export enum SettingsDialogExtendedKey {
   GENERAL = 'general',
   NOTIFICATIONS = 'notifications',
   TRANSCRIPTION = 'transcription',
+  ACCESSIBILITY = 'accessibility',
 }
diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json
index c00f69e8..cb4b5225 100644
--- a/src/frontend/src/locales/en/settings.json
+++ b/src/frontend/src/locales/en/settings.json
@@ -114,6 +114,7 @@
     "video": "Video",
     "general": "General",
     "notifications": "Notifications",
+    "accessibility": "Accessibility",
     "transcription": "Transcription"
   }
 }
diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json
index 49e9c16b..d97cb37a 100644
--- a/src/frontend/src/locales/fr/settings.json
+++ b/src/frontend/src/locales/fr/settings.json
@@ -114,6 +114,7 @@
     "video": "Vidéo",
     "general": "Général",
     "notifications": "Notifications",
+    "accessibility": "Accessibilité",
     "transcription": "Transcription"
   }
 }