♻️(refactor) apply caption text size to subtitles

Use accessibilityStore.captionTextSize in Transcription component.

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to
 
 ### Changed
 
+- ♿️(frontend) Caption text size setting for accessibility #1062
 - ♿️(frontend) sync html lang attribute with i18n for screen readers #1111
 - ♿️(frontend) improve MoreLink a11y and UX on home page #1112
 - ♿(frontend) improve chat toast a11y for screen readers #1109

src/frontend/src/features/subtitle/component/CaptionsSettings.tsx

@@ -3,24 +3,23 @@ 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 type { CaptionTextSize } from '@/stores/accessibility'
-
-const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [
-  'small',
-  'medium',
-  'large',
-]
+import {
+  accessibilityStore,
+  type CaptionTextSize,
+  CAPTION_TEXT_SIZE_OPTIONS,
+} from '@/stores/accessibility'
 
 export const CaptionsSettings = () => {
-  const { t } = useTranslation('settings')
+  const { t } = useTranslation('settings', {
+    keyPrefix: 'accessibility.captions',
+  })
   const snap = useSnapshot(accessibilityStore)
 
   const captionTextSizeItems = useMemo(
     () =>
       CAPTION_TEXT_SIZE_OPTIONS.map((size) => ({
         value: size,
-        label: t(`accessibility.captions.textSize.options.${size}`),
+        label: t(`textSize.options.${size}`),
       })),
     [t]
   )
@@ -33,11 +32,11 @@ export const CaptionsSettings = () => {
           marginBottom: '0.5rem',
         })}
       >
-        {t('accessibility.captions.heading')}
+        {t('heading')}
       </H>
       <Field
         type="select"
-        label={t('accessibility.captions.textSize.label')}
+        label={t('textSize.label')}
         items={captionTextSizeItems}
         selectedKey={snap.captionTextSize}
         onSelectionChange={(key) => {

src/frontend/src/features/subtitle/component/Subtitles.tsx

@@ -8,6 +8,25 @@ import { useRoomContext } from '@livekit/components-react'
 import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
 import { getParticipantName } from '@/features/rooms/utils/getParticipantName'
 import { Participant, RoomEvent } from 'livekit-client'
+import { useSnapshot } from 'valtio'
+import {
+  accessibilityStore,
+  CAPTION_TEXT_SIZE_OPTIONS,
+  type CaptionTextSize,
+} from '@/stores/accessibility'
+
+const FONT_SIZE_CONFIG: Record<
+  CaptionTextSize,
+  { fontSize: string; lineHeight: string }
+> = {
+  small: { fontSize: '0.875rem', lineHeight: '1.2rem' },
+  medium: { fontSize: '1.5rem', lineHeight: '1.7rem' },
+  large: { fontSize: '2.25rem', lineHeight: '2.5rem' },
+}
+
+const CAPTION_FONT_SIZES = Object.fromEntries(
+  CAPTION_TEXT_SIZE_OPTIONS.map((size) => [size, FONT_SIZE_CONFIG[size]])
+) as Record<CaptionTextSize, { fontSize: string; lineHeight: string }>
 
 export interface TranscriptionSegment {
   id: string
@@ -73,8 +92,10 @@ const useTranscriptionState = () => {
 }
 
 const Transcription = ({ row }: { row: TranscriptionRow }) => {
+  const { captionTextSize } = useSnapshot(accessibilityStore)
   const participantColor = getParticipantColor(row.participant)
   const participantName = getParticipantName(row.participant)
+  const { fontSize, lineHeight } = CAPTION_FONT_SIZES[captionTextSize]
 
   const getDisplayText = (row: TranscriptionRow): string => {
     return row.segments
@@ -116,10 +137,9 @@ const Transcription = ({ row }: { row: TranscriptionRow }) => {
           </Text>
           <p
             className={css({
-              fontSize: '1.5rem',
-              lineHeight: '1.7rem',
               fontWeight: '400',
             })}
+            style={{ fontSize, lineHeight }}
           >
             {displayText}
           </p>
@@ -198,7 +218,6 @@ export const Subtitles = () => {
         )
       }
     }
-
     return rows
   }, [transcriptionSegments])
 

src/frontend/src/stores/accessibility.ts

@@ -4,6 +4,12 @@ import { deserializeToProxyMap } from '@/utils/valtio'
 
 export type CaptionTextSize = 'small' | 'medium' | 'large'
 
+export const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [
+  'small',
+  'medium',
+  'large',
+]
+
 type AccessibilityState = {
   announceReactions: boolean
   captionTextSize: CaptionTextSize
@@ -19,7 +25,7 @@ function getAccessibilityState(): AccessibilityState {
     const stored = localStorage.getItem(STORAGE_KEYS.ACCESSIBILITY)
     if (stored) {
       const parsed = JSON.parse(stored)
-      const validCaptionSizes: CaptionTextSize[] = ['small', 'medium', 'large']
+      const validCaptionSizes = CAPTION_TEXT_SIZE_OPTIONS
       const captionTextSize = validCaptionSizes.includes(parsed.captionTextSize)
         ? parsed.captionTextSize
         : DEFAULT_STATE.captionTextSize