✨(feat) add caption text size setting in Accessibility tab

Extract CaptionsSettings component, Settings > Accessibility > Captions.

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,50 @@
+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 } from '@/stores/accessibility'
+import type { CaptionTextSize } from '@/stores/accessibility'
+
+const CAPTION_TEXT_SIZE_OPTIONS: CaptionTextSize[] = [
+  'small',
+  'medium',
+  'large',
+]
+
+export const CaptionsSettings = () => {
+  const { t } = useTranslation('settings')
+  const snap = useSnapshot(accessibilityStore)
+
+  const captionTextSizeItems = useMemo(
+    () =>
+      CAPTION_TEXT_SIZE_OPTIONS.map((size) => ({
+        value: size,
+        label: t(`accessibility.captions.textSize.options.${size}`),
+      })),
+    [t]
+  )
+
+  return (
+    <li>
+      <H
+        lvl={3}
+        className={css({
+          marginBottom: '0.5rem',
+        })}
+      >
+        {t('accessibility.captions.heading')}
+      </H>
+      <Field
+        type="select"
+        label={t('accessibility.captions.textSize.label')}
+        items={captionTextSizeItems}
+        selectedKey={snap.captionTextSize}
+        onSelectionChange={(key) => {
+          accessibilityStore.captionTextSize = key as CaptionTextSize
+        }}
+        wrapperProps={{ noMargin: true, fullWidth: true }}
+      />
+    </li>
+  )
+}