feat(ui,a11y): Phase 4 - toggle 'Testo piu' grande' (SPA) + hint mobile

AndreaPrestia · AndreaPrestia · commit 6ae9c81cb33a · 2026-07-02T15:32:40.000+02:00
Ultima fase del piano di semplificazione UI, focalizzata su accessibilita' per utenti 45-70 anni con vista non ottimale. ## Scelte pragmatiche vs piano originale - SKIP 4.1 (design tokens espliciti in packages/shared/design/tokens.ts): introdurrebbe classi semantiche (text-body-base, ecc.) parallele alle utility Tailwind gia' usate ovunque nel codebase, creando duplicazione e incoerenza. Rimandato a quando ci sara' un refactor mirato. - SEMPLIFICA 4.2: no colonna backend user_preferences.large_text (sarebbe over-engineering per una preferenza cosmetica per-dispositivo). Persistenza locale con localStorage / (mobile: delega al sistema). ## SPA - Toggle 'Testo piu' grande' vero - src/lib/textScale.ts: helper isLargeText / setLargeText / applyLargeText / initLargeText. Persist in localStorage 'accanto.largeText'. - index.css: regola 'html.accanto-large { font-size: 18px }'. La UI Tailwind e' rem-based -> tutta la scala visiva cresce di ~12.5% proporzionalmente (16 -> 18px). - main.tsx: initLargeText() prima del render per evitare flash a font piccolo se attivo. - AccountPage: toggle nel gruppo 'Profilo' (checkbox con label). Setter applica subito la class su <html>. ## Mobile - hint su system settings - iOS Dynamic Type e Android Font Size gia' scalano nativamente i <Text> di React Native (nessun allowFontScaling={false} nel codebase, verificato con grep). - Fare un toggle app-level reinventerebbe la ruota + creerebbe una seconda scala scollegata da quella di sistema. - AccountScreen (Profilo): aggiunto sotto Lingua un piccolo blocco 'Dimensione del testo' con hint 'usa le impostazioni del dispositivo, Accanto rispetta la tua scelta.' ## i18n (IT/EN/ES) - account.textScale.title - account.textScale.toggle (SPA) - account.textScale.hint (SPA) - account.textScale.mobileHint (mobile) ## Verifica - frontend build OK. - mobile tsc --noEmit exit=0. - test manuale: toggle su/off cambia la dimensione visiva di tutti gli elementi che usano rem (praticamente tutta la UI Tailwind). ## Phase 1-4 recap - P1 (dea35d4): welcome + quick action + security banner - P1.5 (1d7801c): fix bypass 2FA middleware + banner reattivo - P2 (1fbd651): Account in 4 accordion + deep-link - P3 (39c6a2f): empty state onboarding + chip audit + AI history unificata - P4 (questo): toggle testo grande SPA + hint mobile
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -10,6 +10,14 @@ body {
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }
 
+/* Accessibility: "Testo più grande" (toggle in Account → Profilo).
+   La class è applicata su <html> a boot da src/lib/textScale.ts leggendo
+   localStorage 'accanto.largeText'. Alza il font-size base da 16px a 18px
+   (+12.5%): tutta la UI Tailwind (che usa rem) scala proporzionalmente. */
+html.accanto-large {
+  font-size: 18px;
+}
+
 @layer components {
   .btn {
     @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors disabled:opacity-50;
diff --git a/frontend/src/lib/textScale.ts b/frontend/src/lib/textScale.ts
@@ -0,0 +1,44 @@
+/**
+ * Preferenza "Testo più grande" (accessibility, Phase 4).
+ *
+ * Persistita in localStorage con la chiave `accanto.largeText`.
+ * Applicata come class `accanto-large` su `<html>`; la regola CSS in
+ * `index.css` porta il font-size base da 16px a 18px. La UI Tailwind
+ * (rem-based) scala di conseguenza.
+ *
+ * Non richiede backend: è una preferenza cosmetica per-dispositivo. Se in
+ * futuro serve sync tra dispositivi si aggiunge una colonna
+ * `user_preferences.large_text` e si sostituisce lo storage.
+ */
+const KEY = 'accanto.largeText';
+const CLASS = 'accanto-large';
+
+export function isLargeText(): boolean {
+  try {
+    return localStorage.getItem(KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+export function setLargeText(enabled: boolean): void {
+  try {
+    if (enabled) localStorage.setItem(KEY, '1');
+    else localStorage.removeItem(KEY);
+  } catch {
+    /* localStorage bloccato: pazienza, resta solo per la sessione */
+  }
+  applyLargeText(enabled);
+}
+
+/** Applica/rimuove la class sul documento senza toccare localStorage. */
+export function applyLargeText(enabled: boolean): void {
+  const html = document.documentElement;
+  if (enabled) html.classList.add(CLASS);
+  else html.classList.remove(CLASS);
+}
+
+/** Applica la preferenza salvata. Da chiamare al bootstrap dell'app. */
+export function initLargeText(): void {
+  applyLargeText(isLargeText());
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -5,6 +5,11 @@ import App from './App';
 import { AuthProvider } from './auth/AuthContext';
 import './i18n';
 import './index.css';
+import { initLargeText } from './lib/textScale';
+
+// Applica subito la preferenza "Testo più grande" (evita flash a font
+// piccolo se attivo).
+initLargeText();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/frontend/src/pages/AccountPage.tsx b/frontend/src/pages/AccountPage.tsx
@@ -11,6 +11,7 @@ import TwoFactorSection from '../components/TwoFactorSection';
 import SecurityAuditSection from '../components/SecurityAuditSection';
 import WellbeingSection from '../components/WellbeingSection';
 import AccordionSection from '../components/AccordionSection';
+import { isLargeText, setLargeText } from '../lib/textScale';
 import type { TwoFactorStatus } from '@accanto/shared/types';
 
 // Anchor id → gruppo accordion da aprire quando l'URL contiene quell'hash.
@@ -47,6 +48,14 @@ export default function AccountPage() {
   const [exportError, setExportError] = useState<string | null>(null);
   const [exporting, setExporting] = useState(false);
 
+  // Accessibility: toggle "Testo più grande". Init dalla preferenza
+  // localStorage; toggle immediato (applica la class sul <html>).
+  const [largeText, setLargeTextState] = useState<boolean>(() => isLargeText());
+  const onToggleLargeText = (next: boolean) => {
+    setLargeTextState(next);
+    setLargeText(next);
+  };
+
   // Hint numerico su "Sicurezza": count di suggerimenti attivi. Per ora: 1 se
   // 2FA disattivata, 0 altrimenti. Errore silenzioso (il hint non è critico).
   const [securityHints, setSecurityHints] = useState<number>(0);
@@ -178,6 +187,20 @@ export default function AccountPage() {
           <LanguageSwitcher />
         </section>
 
+        <section className="space-y-2">
+          <h2 className="text-base font-semibold text-accanto-900">{t('account.textScale.title')}</h2>
+          <p className="text-sm text-accanto-500">{t('account.textScale.hint')}</p>
+          <label className="inline-flex items-center gap-2 text-sm text-accanto-700 select-none cursor-pointer">
+            <input
+              type="checkbox"
+              checked={largeText}
+              onChange={(e) => onToggleLargeText(e.target.checked)}
+              className="w-4 h-4"
+            />
+            <span>{t('account.textScale.toggle')}</span>
+          </label>
+        </section>
+
         <section className="space-y-3">
           <h2 className="text-base font-semibold text-accanto-900">{t('account.changePassword')}</h2>
           <form onSubmit={submitPassword} className="space-y-3">
diff --git a/mobile/src/screens/AccountScreen.tsx b/mobile/src/screens/AccountScreen.tsx
@@ -71,6 +71,14 @@ export default function AccountScreen() {
       <View className="gap-3">
         <AccordionSection title={t('account.groups.profile')} defaultOpen>
           <LanguageSection />
+          <View className="gap-1">
+            <Text className="text-base font-semibold text-accanto-900">
+              {t('account.textScale.title')}
+            </Text>
+            <Text className="text-sm text-accanto-500">
+              {t('account.textScale.mobileHint')}
+            </Text>
+          </View>
           <ChangePasswordSection />
         </AccordionSection>
 
diff --git a/packages/shared/src/i18n/locales/en.json b/packages/shared/src/i18n/locales/en.json
@@ -83,6 +83,12 @@
     "languageSectionTitle": "Language",
     "languageSectionHint": "The app will use this language on your devices.",
     "languageSaved": "Language updated.",
+    "textScale": {
+      "title": "Text size",
+      "toggle": "Larger text",
+      "hint": "Increase text size for easier reading.",
+      "mobileHint": "To change text size use your device settings. Accanto respects your choice."
+    },
     "deleteTitle": "Delete account",
     "deleteDescription": "Deletion permanently removes your profile and any circles where you are the only member, along with the related journal, documents, questions and updates. If you share a circle with other people, you must first have them leave or leave the circle yourself.",
     "deleteConfirmLabel": "Confirm with your password",
diff --git a/packages/shared/src/i18n/locales/es.json b/packages/shared/src/i18n/locales/es.json
@@ -83,6 +83,12 @@
     "languageSectionTitle": "Idioma",
     "languageSectionHint": "La aplicación usará este idioma en tus dispositivos.",
     "languageSaved": "Idioma actualizado.",
+    "textScale": {
+      "title": "Tamaño del texto",
+      "toggle": "Texto más grande",
+      "hint": "Aumenta el tamaño del texto para una lectura más cómoda.",
+      "mobileHint": "Para cambiar el tamaño del texto usa los ajustes de tu dispositivo. Accanto respeta tu elección."
+    },
     "deleteTitle": "Eliminar cuenta",
     "deleteDescription": "La eliminación borra de forma definitiva tu perfil y todos los círculos en los que eres el único miembro, junto con el diario, los documentos, las preguntas y las novedades vinculadas. Si compartes un círculo con otras personas, primero debes hacer que salgan o salir tú.",
     "deleteConfirmLabel": "Confirma con tu contraseña",
diff --git a/packages/shared/src/i18n/locales/it.json b/packages/shared/src/i18n/locales/it.json
@@ -83,6 +83,12 @@
     "languageSectionTitle": "Lingua",
     "languageSectionHint": "L'app userà questa lingua sui tuoi dispositivi.",
     "languageSaved": "Lingua aggiornata.",
+    "textScale": {
+      "title": "Dimensione del testo",
+      "toggle": "Testo più grande",
+      "hint": "Aumenta la dimensione del testo per una lettura più comoda.",
+      "mobileHint": "Per cambiare la dimensione del testo usa le impostazioni del tuo dispositivo. Accanto rispetta la tua scelta."
+    },
     "deleteTitle": "Elimina account",
     "deleteDescription": "L'eliminazione rimuove definitivamente il tuo profilo e tutti i cerchi di cui sei l'unico membro, insieme a diario, documenti, domande e aggiornamenti collegati. Se condividi un cerchio con altre persone, devi prima farli uscire o uscire tu stesso.",
     "deleteConfirmLabel": "Conferma con la password",
