📝(frontend) update a11y store labels and link for clarity

improves naming and navigation for better user understanding of options

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>

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": {

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",

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",

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": {

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