diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx index a67776d0..7018f90d 100644 --- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx +++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx @@ -11,6 +11,7 @@ import { RiSettings3Line, RiSpeakerLine, RiVideoOnLine, + RiEyeLine, } from '@remixicon/react' import { AccountTab } from './tabs/AccountTab' import { NotificationsTab } from './tabs/NotificationsTab' @@ -22,6 +23,7 @@ import { useRef } from 'react' import { useMediaQuery } from '@/features/rooms/livekit/hooks/useMediaQuery' import { SettingsDialogExtendedKey } from '@/features/settings/type' import { useIsAdminOrOwner } from '@/features/rooms/livekit/hooks/useIsAdminOrOwner' +import AccessibilityTab from './tabs/AccessibilityTab' const tabsStyle = css({ maxHeight: '40.625rem', // fixme size copied from meet settings modal @@ -112,6 +114,11 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => { t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)} )} + + + {isWideScreen && + t(`tabs.${SettingsDialogExtendedKey.ACCESSIBILITY}`)} +
@@ -125,6 +132,7 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => { {/* Transcription tab won't be accessible if the tab is not active in the tab list */} +
diff --git a/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx new file mode 100644 index 00000000..7509a049 --- /dev/null +++ b/src/frontend/src/features/settings/components/tabs/AccessibilityTab.tsx @@ -0,0 +1,29 @@ +import { Field, H } from '@/primitives' +import { TabPanel, TabPanelProps } from '@/primitives/Tabs' +import { css } from '@/styled-system/css' +import { useTranslation } from 'react-i18next' + +export type AccessibilityTabProps = Pick + +export const AccessibilityTab = ({ id }: AccessibilityTabProps) => { + const { t } = useTranslation('settings', { keyPrefix: 'tabs' }) + + return ( + + {t('accessibility')} + + + ) +} + +export default AccessibilityTab diff --git a/src/frontend/src/features/settings/type.ts b/src/frontend/src/features/settings/type.ts index 0a1af14f..93428717 100644 --- a/src/frontend/src/features/settings/type.ts +++ b/src/frontend/src/features/settings/type.ts @@ -5,4 +5,5 @@ export enum SettingsDialogExtendedKey { GENERAL = 'general', NOTIFICATIONS = 'notifications', TRANSCRIPTION = 'transcription', + ACCESSIBILITY = 'accessibility', } diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json index c00f69e8..cb4b5225 100644 --- a/src/frontend/src/locales/en/settings.json +++ b/src/frontend/src/locales/en/settings.json @@ -114,6 +114,7 @@ "video": "Video", "general": "General", "notifications": "Notifications", + "accessibility": "Accessibility", "transcription": "Transcription" } } diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json index 49e9c16b..d97cb37a 100644 --- a/src/frontend/src/locales/fr/settings.json +++ b/src/frontend/src/locales/fr/settings.json @@ -114,6 +114,7 @@ "video": "Vidéo", "general": "Général", "notifications": "Notifications", + "accessibility": "Accessibilité", "transcription": "Transcription" } }