diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx index ed4a782b..4af85212 100644 --- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx +++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx @@ -21,7 +21,7 @@ import { AudioTab } from './tabs/AudioTab' import { VideoTab } from './tabs/VideoTab' import { TranscriptionTab } from './tabs/TranscriptionTab' import { ShortcutTab } from './tabs/ShortcutTab' -import { useRef } from 'react' +import { useEffect, 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' @@ -68,6 +68,17 @@ export const SettingsDialogExtended = (props: SettingsDialogExtended) => { const isAdminOrOwner = useIsAdminOrOwner() + useEffect(() => { + if (!props.isOpen) return + const timer = setTimeout(() => { + const selectedTab = dialogEl.current?.querySelector( + '[role="tab"][data-selected]' + ) as HTMLElement | null + selectedTab?.focus() + }, 200) + return () => clearTimeout(timer) + }, [props.isOpen]) + return ( { paddingRight: !isWideScreen ? '1rem' : undefined, }} > - {isWideScreen && ( - - {t('dialog.heading')} - - )} - - - + + {t('dialog.heading')} + + + + - - + + - - + + - - + + - - + + - - + + {isAdminOrOwner && ( - + {isWideScreen && t(`tabs.${SettingsDialogExtendedKey.TRANSCRIPTION}`)} )} - - + + diff --git a/src/frontend/src/locales/en/settings.json b/src/frontend/src/locales/en/settings.json index 6d0420bf..5320d4f6 100644 --- a/src/frontend/src/locales/en/settings.json +++ b/src/frontend/src/locales/en/settings.json @@ -106,7 +106,8 @@ "columnShortcut": "Shortcut" }, "dialog": { - "heading": "Settings" + "heading": "Settings", + "tablistLabel": "Sections" }, "language": { "heading": "Language", diff --git a/src/frontend/src/locales/fr/settings.json b/src/frontend/src/locales/fr/settings.json index dfefb828..c4f911ff 100644 --- a/src/frontend/src/locales/fr/settings.json +++ b/src/frontend/src/locales/fr/settings.json @@ -106,7 +106,8 @@ "columnShortcut": "Raccourci" }, "dialog": { - "heading": "Paramètres" + "heading": "Paramètres", + "tablistLabel": "Sections" }, "language": { "heading": "Langue",