♻️(refactor) apply caption text size to subtitles

Use accessibilityStore.captionTextSize in Transcription component.

CHANGELOG.md

@@ -10,17 +10,13 @@ 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
 
 ## [1.10.0] - 2026-03-05
 
-### Fixed
-
-- 🩹(frontend) remove incorrect reference to ProConnect on the prejoin #1080
-- ✨(frontend) add Ctrl+Shift+/ to open shortcuts settings #1050
-- ♿(frontend) announce selected state to screen readers #1081
-- 💄(frontend) truncate long names with ellipsis in reaction overlay #1099
-
 ### Changed
 
 - 🔒️(backend) enhance API input validation to strengthen security #1053
@@ -34,6 +30,10 @@ and this project adheres to
 - 💄(frontend) truncate pinned participant name with ellipsis on overflow #1056
 - ♿(frontend) prevent focus ring clipping on invite dialog #1078
 - ♿(frontend) dynamic tab title when connected to meeting #1060
+- 🩹(frontend) remove incorrect reference to ProConnect on the prejoin #1080
+- ✨(frontend) add Ctrl+Shift+/ to open shortcuts settings #1050
+- ♿(frontend) announce selected state to screen readers #1081
+- 💄(frontend) truncate long names with ellipsis in reaction overlay #1099
 
 ### Added
 

src/frontend/src/features/home/components/MoreLink.tsx

@@ -2,23 +2,25 @@ import { A, Text } from '@/primitives'
 import { useTranslation } from 'react-i18next'
 import { useConfig } from '@/api/useConfig'
 
+const appTitle = import.meta.env.VITE_APP_TITLE ?? 'LaSuite Meet'
+
 export const MoreLink = () => {
   const { t } = useTranslation('home')
   const { data } = useConfig()
 
-  if (!data?.manifest_link) return
+  if (!data?.manifest_link) return null
 
   return (
-    <Text as={'p'} variant={'sm'} style={{ padding: '1rem 0' }}>
+    <Text as="p" variant="sm" style={{ padding: '1rem 0' }}>
       <A
         href={data?.manifest_link}
         target="_blank"
         rel="noopener noreferrer"
-        aria-label={t('moreLinkLabel')}
+        externalIcon
+        aria-label={t('moreLinkLabel', { appTitle })}
       >
-        {t('moreLink')}
-      </A>{' '}
-      {t('moreAbout', { appTitle: `${import.meta.env.VITE_APP_TITLE}` })}
+        {t('moreLink')} {t('moreAbout', { appTitle })}
+      </A>
     </Text>
   )
 }

src/frontend/src/features/home/routes/Home.tsx

@@ -258,23 +258,10 @@ export const Home = () => {
               </DialogTrigger>
             </div>
             <Separator />
-            <div
-              className={css({
-                display: { base: 'none', lg: 'inline' },
-              })}
-            >
-              <MoreLink />
-            </div>
+            <MoreLink />
           </LeftColumn>
           <RightColumn>
             <IntroSlider />
-            <div
-              className={css({
-                display: { base: 'inline', lg: 'none' },
-              })}
-            >
-              <MoreLink />
-            </div>
           </RightColumn>
         </Columns>
         <LaterMeetingDialog

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -18,10 +18,15 @@ import {
   ANIMATION_DURATION,
   ReactionPortals,
 } from '@/features/rooms/livekit/components/ReactionPortal'
+import { layoutStore } from '@/stores/layout'
+import { PanelId } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
   const { triggerNotificationSound } = useNotificationSound()
+  const { t } = useTranslation('notifications')
+  const announce = useScreenReaderAnnounce()
 
   const [reactions, setReactions] = useState<Reaction[]>([])
   const instanceIdRef = useRef(0)
@@ -41,12 +46,21 @@ export const MainNotificationToast = () => {
         },
         { timeout: NotificationDuration.MESSAGE }
       )
+      if (layoutStore.activePanelId !== PanelId.CHAT) {
+        announce(
+          t('chatMessageReceived', {
+            name: participant.name || t('defaultName'),
+            message: chatMessage.message,
+          }),
+          'polite'
+        )
+      }
     }
     room.on(RoomEvent.ChatMessage, handleChatMessage)
     return () => {
       room.off(RoomEvent.ChatMessage, handleChatMessage)
     }
-  }, [room, triggerNotificationSound])
+  }, [room, triggerNotificationSound, announce, t])
 
   const handleEmoji = (emoji: string, participant: Participant) => {
     if (!emoji || !Object.values(Emoji).includes(emoji as Emoji)) return

src/frontend/src/features/rooms/livekit/prefabs/Chat.tsx

@@ -151,7 +151,12 @@ export function Chat({ ...props }: ChatProps) {
         minHeight={0}
         overflowY="scroll"
       >
-        <ul className="lk-list lk-chat-messages" ref={ulRef}>
+        <ul
+          className="lk-list lk-chat-messages"
+          ref={ulRef}
+          role="log"
+          aria-relevant="additions"
+        >
           {renderedMessages}
         </ul>
       </Div>

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

@@ -4,6 +4,7 @@ import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
 import { useSnapshot } from 'valtio'
 import { accessibilityStore } from '@/stores/accessibility'
+import { CaptionsSettings } from '@/features/subtitle/component/CaptionsSettings'
 
 export type AccessibilityTabProps = Pick<TabPanelProps, 'id'>
 
@@ -32,6 +33,7 @@ export const AccessibilityTab = ({ id }: AccessibilityTabProps) => {
             wrapperProps={{ noMargin: true, fullWidth: true }}
           />
         </li>
+        <CaptionsSettings />
       </ul>
     </TabPanel>
   )

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

@@ -0,0 +1,49 @@
+import { Field, H } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSnapshot } from 'valtio'
+import {
+  accessibilityStore,
+  type CaptionTextSize,
+  CAPTION_TEXT_SIZE_OPTIONS,
+} from '@/stores/accessibility'
+
+export const CaptionsSettings = () => {
+  const { t } = useTranslation('settings', {
+    keyPrefix: 'accessibility.captions',
+  })
+  const snap = useSnapshot(accessibilityStore)
+
+  const captionTextSizeItems = useMemo(
+    () =>
+      CAPTION_TEXT_SIZE_OPTIONS.map((size) => ({
+        value: size,
+        label: t(`textSize.options.${size}`),
+      })),
+    [t]
+  )
+
+  return (
+    <li>
+      <H
+        lvl={3}
+        className={css({
+          marginBottom: '0.5rem',
+        })}
+      >
+        {t('heading')}
+      </H>
+      <Field
+        type="select"
+        label={t('textSize.label')}
+        items={captionTextSizeItems}
+        selectedKey={snap.captionTextSize}
+        onSelectionChange={(key) => {
+          accessibilityStore.captionTextSize = key as CaptionTextSize
+        }}
+        wrapperProps={{ noMargin: true, fullWidth: true }}
+      />
+    </li>
+  )
+}

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/locales/de/home.json

@@ -10,7 +10,7 @@
   "joinMeetingTipContent": "Sie können einem Meeting beitreten, indem Sie den vollständigen Link in die Adressleiste Ihres Browsers einfügen.",
   "joinMeetingTipHeading": "Wussten Sie schon?",
   "loginToCreateMeeting": "Melden Sie sich an, um ein Meeting zu erstellen",
-  "moreLinkLabel": "Mehr erfahren – neues Tab",
+  "moreLinkLabel": "Mehr erfahren über {{appTitle}} – neues Tab",
   "moreLink": "Mehr erfahren",
   "moreAbout": "über {{appTitle}}",
   "createMenu": {

src/frontend/src/locales/de/notifications.json

@@ -9,6 +9,7 @@
   },
   "muted": "{{name}} hat dein Mikrofon stummgeschaltet. Kein Teilnehmer kann dich hören.",
   "openChat": "Chat öffnen",
+  "chatMessageReceived": "{{name}} sagt: {{message}}",
   "lowerHand": {
     "auto": "Es scheint, dass du angefangen hast zu sprechen, daher wird deine Hand gesenkt.",
     "dismiss": "Hand oben lassen"

src/frontend/src/locales/de/rooms.json

@@ -322,7 +322,8 @@
     "closeButton": "{{content}} ausblenden"
   },
   "chat": {
-    "disclaimer": "Die Nachrichten sind nur für Teilnehmer zum Zeitpunkt des Sendens sichtbar. Alle Nachrichten werden am Ende des Anrufs gelöscht."
+    "disclaimer": "Die Nachrichten sind nur für Teilnehmer zum Zeitpunkt des Sendens sichtbar. Alle Nachrichten werden am Ende des Anrufs gelöscht.",
+    "messagesLog": "Chat-Nachrichten"
   },
   "moreTools": {
     "body": "Greifen Sie auf weitere Tools zu, um Ihre Meetings zu verbessern.",

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

@@ -116,6 +116,17 @@
   "accessibility": {
     "announceReactions": {
       "label": "Reaktionen vorlesen"
+    },
+    "captions": {
+      "heading": "Untertitel",
+      "textSize": {
+        "label": "Untertitel-Schriftgröße",
+        "options": {
+          "small": "Klein",
+          "medium": "Mittel",
+          "large": "Groß"
+        }
+      }
     }
   },
   "tabs": {

src/frontend/src/locales/en/home.json

@@ -10,7 +10,7 @@
   "joinMeetingTipContent": "You can join a meeting by pasting its full link in the browser's address bar.",
   "joinMeetingTipHeading": "Did you know?",
   "loginToCreateMeeting": "Login to create a meeting",
-  "moreLinkLabel": "Learn more - new tab",
+  "moreLinkLabel": "Learn more about {{appTitle}} - new tab",
   "moreLink": "Learn more",
   "moreAbout": "about {{appTitle}}",
   "createMenu": {

src/frontend/src/locales/en/notifications.json

@@ -9,6 +9,7 @@
   },
   "muted": "{{name}} has muted your microphone. No participant can hear you.",
   "openChat": "Open chat",
+  "chatMessageReceived": "{{name}} says: {{message}}",
   "lowerHand": {
     "auto": "It seems you have started speaking, so your hand will be lowered.",
     "dismiss": "Keep hand raised"

src/frontend/src/locales/en/rooms.json

@@ -322,7 +322,8 @@
     "closeButton": "Hide {{content}}"
   },
   "chat": {
-    "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call."
+    "disclaimer": "The messages are visible to participants only at the time they are sent. All messages are deleted at the end of the call.",
+    "messagesLog": "Chat messages"
   },
   "moreTools": {
     "body": "Access more tools to enhance your meetings.",

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

@@ -116,6 +116,17 @@
   "accessibility": {
     "announceReactions": {
       "label": "Announce reactions aloud"
+    },
+    "captions": {
+      "heading": "Captions",
+      "textSize": {
+        "label": "Caption text size",
+        "options": {
+          "small": "Small",
+          "medium": "Medium",
+          "large": "Large"
+        }
+      }
     }
   },
   "tabs": {

src/frontend/src/locales/fr/home.json

@@ -10,7 +10,7 @@
   "joinMeetingTipContent": "Vous pouvez rejoindre une réunion en copiant directement son lien complet dans la barre d'adresse du navigateur.",
   "joinMeetingTipHeading": "Astuce",
   "loginToCreateMeeting": "Connectez-vous pour créer une réunion",
-  "moreLinkLabel": "En savoir plus - nouvelle fenêtre",
+  "moreLinkLabel": "En savoir plus sur {{appTitle}} - nouvelle fenêtre",
   "moreLink": "En savoir plus",
   "moreAbout": "sur {{appTitle}}",
   "createMenu": {

src/frontend/src/locales/fr/notifications.json

@@ -9,6 +9,7 @@
   },
   "muted": "{{name}} a coupé votre micro. Aucun participant ne peut l'entendre.",
   "openChat": "Ouvrir le chat",
+  "chatMessageReceived": "{{name}} dit : {{message}}",
   "lowerHand": {
     "auto": "Il semblerait que vous ayez pris la parole, donc la main va être baissée.",
     "dismiss": "Laisser la main levée"

src/frontend/src/locales/fr/rooms.json

@@ -322,7 +322,8 @@
     "closeButton": "Masquer {{content}}"
   },
   "chat": {
-    "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel."
+    "disclaimer": "Les messages sont visibles par les participants uniquement au moment de\nleur envoi. Tous les messages sont supprimés à la fin de l'appel.",
+    "messagesLog": "Messages du chat"
   },
   "moreTools": {
     "body": "Accèder à d'avantage d'outils pour améliorer vos réunions.",

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

@@ -116,6 +116,17 @@
   "accessibility": {
     "announceReactions": {
       "label": "Vocaliser les réactions"
+    },
+    "captions": {
+      "heading": "Sous-titres",
+      "textSize": {
+        "label": "Taille du texte des sous-titres",
+        "options": {
+          "small": "Petit",
+          "medium": "Moyen",
+          "large": "Grand"
+        }
+      }
     }
   },
   "tabs": {

src/frontend/src/locales/nl/home.json

@@ -10,7 +10,7 @@
   "joinMeetingTipContent": "U kunt deelnemen aan een vergadering door de volledige link in de adresbalk van de browser te plakken.",
   "joinMeetingTipHeading": "Wist u dat?",
   "loginToCreateMeeting": "Log in om een vergadering te maken",
-  "moreLinkLabel": "Meer informatie - nieuw tabblad",
+  "moreLinkLabel": "Meer informatie over {{appTitle}} - nieuw tabblad",
   "moreLink": "Meer informatie",
   "moreAbout": "over {{appTitle}}",
   "createMenu": {

src/frontend/src/locales/nl/notifications.json

@@ -9,6 +9,7 @@
   },
   "muted": "{{name}} heeft uw microfoon gedempt. Deelnemers kunnen u niet horen.",
   "openChat": "Open chat",
+  "chatMessageReceived": "{{name}} zegt: {{message}}",
   "lowerHand": {
     "auto": "Het lijkt erop dat u bent begonnen te spreken, dus we laten uw hand zakken.",
     "dismiss": "Houdt uw hand opgestoken"

src/frontend/src/locales/nl/rooms.json

@@ -322,7 +322,8 @@
     "closeButton": "Verberg {{content}}"
   },
   "chat": {
-    "disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek."
+    "disclaimer": "De berichten zijn alleen voor de deelnemers zichtbaar op het moment dat ze worden verzonden. Alle berichten worden verwijderd aan het einde van het gesprek.",
+    "messagesLog": "Chatberichten"
   },
   "moreTools": {
     "body": "Je krijgt toegang tot meer tools om je vergaderingen te verbeteren.",

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

@@ -113,12 +113,29 @@
     "label": "Taal"
   },
   "settingsButtonLabel": "Instellingen",
+  "accessibility": {
+    "announceReactions": {
+      "label": "Reacties hardop aankondigen"
+    },
+    "captions": {
+      "heading": "Ondertitels",
+      "textSize": {
+        "label": "Ondertiteltekstgrootte",
+        "options": {
+          "small": "Klein",
+          "medium": "Gemiddeld",
+          "large": "Groot"
+        }
+      }
+    }
+  },
   "tabs": {
     "account": "Profiel",
     "audio": "Audio",
     "video": "Video",
     "general": "Algemeen",
     "notifications": "Meldingen",
+    "accessibility": "Toegankelijkheid",
     "transcription": "Transcriptie",
     "shortcuts": "Sneltoetsen"
   }

src/frontend/src/stores/accessibility.ts

@@ -2,12 +2,22 @@ import { proxy, subscribe } from 'valtio'
 import { STORAGE_KEYS } from '@/utils/storageKeys'
 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
 }
 
 const DEFAULT_STATE: AccessibilityState = {
   announceReactions: false,
+  captionTextSize: 'medium',
 }
 
 function getAccessibilityState(): AccessibilityState {
@@ -15,6 +25,10 @@ function getAccessibilityState(): AccessibilityState {
     const stored = localStorage.getItem(STORAGE_KEYS.ACCESSIBILITY)
     if (stored) {
       const parsed = JSON.parse(stored)
+      const validCaptionSizes = CAPTION_TEXT_SIZE_OPTIONS
+      const captionTextSize = validCaptionSizes.includes(parsed.captionTextSize)
+        ? parsed.captionTextSize
+        : DEFAULT_STATE.captionTextSize
       return {
         ...DEFAULT_STATE,
         ...parsed,
@@ -22,6 +36,7 @@ function getAccessibilityState(): AccessibilityState {
           typeof parsed.announceReactions === 'boolean'
             ? parsed.announceReactions
             : DEFAULT_STATE.announceReactions,
+        captionTextSize,
       }
     }