From 086db3d0891e856906d1bd6d49e411b466bf1324 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 7 Jan 2026 13:18:26 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(frontend)=20update=20a11y=20store?=
 =?UTF-8?q?=20labels=20and=20link=20for=20clarity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

improves naming and navigation for better user understanding of options
---
 .../components/tabs/AccessibilityTab.tsx        | 17 ++++++++++++++---
 src/frontend/src/locales/de/rooms.json          | 13 ++++++++++++-
 src/frontend/src/locales/en/settings.json       |  5 +++++
 src/frontend/src/locales/fr/settings.json       |  5 +++++
 src/frontend/src/locales/nl/rooms.json          | 13 ++++++++++++-
 src/frontend/src/utils/storageKeys.tsx          |  1 +
 6 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx
index 7509a049..def060b5 100644
--- a/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx
+++ b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx
@@ -2,15 +2,18 @@ import { Field, H } from '@/primitives'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import { accessibilityStore } from '@/stores/accessibility'
 
 export type AccessibilityTabProps = Pick<TabPanelProps, 'id'>
 
 export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
-  const { t } = useTranslation('settings', { keyPrefix: 'tabs' })
+  const { t } = useTranslation('settings')
+  const snap = useSnapshot(accessibilityStore)
 
   return (
     <TabPanel padding={'md'} flex id={id}>
-      <H lvl={2}>{t('accessibility')}</H>
+      <H lvl={2}>{t('tabs.accessibility')}</H>
       <ul
         className={css({
           display: 'flex',
@@ -19,7 +22,15 @@ export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
         })}
       >
         <li>
-          <Field type="switch" label={t('accessibility.label')} />
+          <Field
+            type="switch"
+            label={t('accessibility.announceReactions.label')}
+            isSelected={snap.announceReactions}
+            onChange={(value) => {
+              accessibilityStore.announceReactions = value
+            }}
+            wrapperProps={{ noMargin: true, fullWidth: true }}
+          />
         </li>
       </ul>
     </TabPanel>
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 60823591..e54ce284 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -208,7 +208,18 @@
     "reactions": {
       "button": "Reaktion senden",
       "send": "Reaktion {{emoji}} senden",
-      "you": "Sie"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "Sie",
+      "emojis": {
+        "thumbs-up": "Daumen hoch",
+        "thumbs-down": "Daumen runter",
+        "clapping-hands": "Klatschende Hände",
+        "red-heart": "rotes Herz",
+        "face-with-tears-of-joy": "Gesicht mit Freudentränen",
+        "face-with-open-mouth": "überraschter Gesichtsausdruck",
+        "party-popper": "Party-Popper",
+        "folded-hands": "gefaltete Hände"
+      }
     }
   },
   "options": {
diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json
index cb4b5225..0c1865dc 100644
--- a/src/frontend/src/locales/en/settings.json
+++ b/src/frontend/src/locales/en/settings.json
@@ -108,6 +108,11 @@
     "label": "Language"
   },
   "settingsButtonLabel": "Settings",
+  "accessibility": {
+    "announceReactions": {
+      "label": "Announce reactions aloud"
+    }
+  },
   "tabs": {
     "account": "Profile",
     "audio": "Audio",
diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json
index d97cb37a..c5d96efa 100644
--- a/src/frontend/src/locales/fr/settings.json
+++ b/src/frontend/src/locales/fr/settings.json
@@ -108,6 +108,11 @@
     "label": "Langue de l'application"
   },
   "settingsButtonLabel": "Paramètres",
+  "accessibility": {
+    "announceReactions": {
+      "label": "Vocaliser les réactions"
+    }
+  },
   "tabs": {
     "account": "Profil",
     "audio": "Audio",
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index 5e899bdb..282a1acb 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -208,7 +208,18 @@
     "reactions": {
       "button": "Stuur reactie",
       "send": "Stuur reactie {{emoji}}",
-      "you": "U"
+      "announce": "{{name}} : {{emoji}}",
+      "you": "U",
+      "emojis": {
+        "thumbs-up": "duim omhoog",
+        "thumbs-down": "duim omlaag",
+        "clapping-hands": "applaudisserende handen",
+        "red-heart": "rood hart",
+        "face-with-tears-of-joy": "gezicht met tranen van vreugde",
+        "face-with-open-mouth": "verrast gezicht",
+        "party-popper": "feestknaller",
+        "folded-hands": "gevouwen handen"
+      }
     }
   },
   "options": {
diff --git a/src/frontend/src/utils/storageKeys.tsx b/src/frontend/src/utils/storageKeys.tsx
index 8e883359..6dc10523 100644
--- a/src/frontend/src/utils/storageKeys.tsx
+++ b/src/frontend/src/utils/storageKeys.tsx
@@ -4,4 +4,5 @@
 export const STORAGE_KEYS = {
   NOTIFICATIONS: 'app_notification_settings',
   USER_PREFERENCES: 'app_user_preferences',
+  ACCESSIBILITY: 'app_accessibility_settings',
 } as const