✨(frontend) add font selector in accessibility settings

Dropdown with description and FR/EN/NL translations.

CHANGELOG.md

@@ -61,6 +61,7 @@ and this project adheres to
 - ✨(summary) allow more file extensions #1265
 - ♿️(frontend) refocus reactions toolbar with ctrl+shift+e is activated #1262
 - ♿️(frontend) set an explicit document title on recording download page #1261
+- ♿️(frontend) add customizable accessibility fonts #1270
 
 ### Fixed
 

src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx

@@ -1,9 +1,14 @@
-import { Field, H } from '@/primitives'
+import { Field, H, Text } from '@/primitives'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { css } from '@/styled-system/css'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSnapshot } from 'valtio'
-import { accessibilityStore } from '@/stores/accessibility'
+import {
+  accessibilityStore,
+  UI_FONT_OPTIONS,
+  type UiFont,
+} from '@/stores/accessibility'
 import { CaptionsSettings } from '@/features/subtitle/component/CaptionsSettings'
 
 export type AccessibilityTabProps = Pick<TabPanelProps, 'id'>
@@ -12,6 +17,15 @@ export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
   const { t } = useTranslation('settings')
   const snap = useSnapshot(accessibilityStore)
 
+  const fontItems = useMemo(
+    () =>
+      UI_FONT_OPTIONS.map((font) => ({
+        value: font,
+        label: t(`accessibility.font.options.${font}`),
+      })),
+    [t]
+  )
+
   return (
     <TabPanel padding={'md'} flex id={id}>
       <H lvl={2}>{t('tabs.accessibility')}</H>
@@ -33,6 +47,21 @@ export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
             wrapperProps={{ noMargin: true, fullWidth: true }}
           />
         </li>
+        <li>
+          <Field
+            type="select"
+            label={t('accessibility.font.label')}
+            items={fontItems}
+            selectedKey={snap.uiFont}
+            onSelectionChange={(key) => {
+              accessibilityStore.uiFont = key as UiFont
+            }}
+            wrapperProps={{ noMargin: true, fullWidth: true }}
+          />
+          <Text variant="smNote" className={css({ marginTop: '0.25rem' })}>
+            {t('accessibility.font.description')}
+          </Text>
+        </li>
         <CaptionsSettings />
       </ul>
     </TabPanel>

src/frontend/src/locales/de/settings.json

@@ -117,6 +117,16 @@
     "announceReactions": {
       "label": "Reaktionen vorlesen"
     },
+    "font": {
+      "label": "Anzeigeschrift",
+      "description": "Passe die in der Oberfläche verwendete Schrift für ein besseres Leseerlebnis an.",
+      "options": {
+        "default": "Standard (System)",
+        "lexend": "Lexend (verbesserte Lesbarkeit)",
+        "atkinson-hyperlegible": "Atkinson Hyperlegible (Sehbeeinträchtigung)",
+        "opendyslexic": "OpenDyslexic (Dyslexie)"
+      }
+    },
     "captions": {
       "heading": "Untertitel",
       "textSize": {

src/frontend/src/locales/en/settings.json

@@ -117,6 +117,16 @@
     "announceReactions": {
       "label": "Announce reactions aloud"
     },
+    "font": {
+      "label": "Display font",
+      "description": "Customize the font used in the interface to improve your reading comfort.",
+      "options": {
+        "default": "Default (system)",
+        "lexend": "Lexend (improved readability)",
+        "atkinson-hyperlegible": "Atkinson Hyperlegible (low vision)",
+        "opendyslexic": "OpenDyslexic (dyslexia)"
+      }
+    },
     "captions": {
       "heading": "Captions",
       "textSize": {

src/frontend/src/locales/fr/settings.json

@@ -117,6 +117,16 @@
     "announceReactions": {
       "label": "Vocaliser les réactions"
     },
+    "font": {
+      "label": "Police d'affichage",
+      "description": "Personnalisez la police utilisée dans l'interface pour améliorer votre confort de lecture.",
+      "options": {
+        "default": "Par défaut",
+        "lexend": "Lexend (lisibilité améliorée)",
+        "atkinson-hyperlegible": "Atkinson Hyperlegible (basse vision)",
+        "opendyslexic": "OpenDyslexic (dyslexie)"
+      }
+    },
     "captions": {
       "heading": "Sous-titres",
       "textSize": {

src/frontend/src/locales/nl/settings.json

@@ -117,6 +117,16 @@
     "announceReactions": {
       "label": "Reacties hardop aankondigen"
     },
+    "font": {
+      "label": "Weergavelettertype",
+      "description": "Pas het lettertype van de interface aan om uw leescomfort te verbeteren.",
+      "options": {
+        "default": "Standaard (systeem)",
+        "lexend": "Lexend (verbeterde leesbaarheid)",
+        "atkinson-hyperlegible": "Atkinson Hyperlegible (slechtziend)",
+        "opendyslexic": "OpenDyslexic (dyslexie)"
+      }
+    },
     "captions": {
       "heading": "Ondertitels",
       "textSize": {