diff --git a/src/frontend/src/stores/accessibility.ts b/src/frontend/src/stores/accessibility.ts index 39265fa6..add90462 100644 --- a/src/frontend/src/stores/accessibility.ts +++ b/src/frontend/src/stores/accessibility.ts @@ -2,12 +2,16 @@ import { proxy, subscribe } from 'valtio' import { STORAGE_KEYS } from '@/utils/storageKeys' import { deserializeToProxyMap } from '@/utils/valtio' +export type CaptionTextSize = 'small' | 'medium' | 'large' + type AccessibilityState = { announceReactions: boolean + captionTextSize: CaptionTextSize } const DEFAULT_STATE: AccessibilityState = { announceReactions: false, + captionTextSize: 'medium', } function getAccessibilityState(): AccessibilityState { @@ -15,6 +19,10 @@ function getAccessibilityState(): AccessibilityState { const stored = localStorage.getItem(STORAGE_KEYS.ACCESSIBILITY) if (stored) { const parsed = JSON.parse(stored) + const validCaptionSizes: CaptionTextSize[] = ['small', 'medium', 'large'] + const captionTextSize = validCaptionSizes.includes(parsed.captionTextSize) + ? parsed.captionTextSize + : DEFAULT_STATE.captionTextSize return { ...DEFAULT_STATE, ...parsed, @@ -22,6 +30,7 @@ function getAccessibilityState(): AccessibilityState { typeof parsed.announceReactions === 'boolean' ? parsed.announceReactions : DEFAULT_STATE.announceReactions, + captionTextSize, } }