🐛(frontend) keep the admin panel in place when changing a setting

React Aria renders the radio and switch inputs visually hidden and
absolutely positioned. Their labels were not positioned, so in the
side panel the inputs were anchored to the aside and did not scroll
with its content. Focusing one made Chrome scroll the aside, which
has no scrollbar, hiding the panel content.

Position the labels so each hidden input stays inside its control.

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to
 - ⚡️(backend) reduce domain queries on the application token endpoint
 - ♻️️️(backend) use a dedicated auth scheme for LiveKit token auth
 - ♻️(all) stop relying on cookies for the lobby flow
+- ♿️(frontend) show a visible focus outline on menu items #1797
 
 ### Fixed
 
@@ -25,6 +26,9 @@ and this project adheres to
 - 🔒️(frontend) upgrade tiff to fix CVE-2026-4775
 - 🔒️(backend) bind accepted lobby entries to the current username
 - 🔒️(backend) sign lobby participant id
+- 🐛(frontend) omit the default speaker id sent to LiveKit
+- 🐛(frontend) play the speaker test when no output is picked
+- 🐛(frontend) keep the admin panel in place when changing a setting #1804
 
 ## [1.34.0] - 2026-10-07
 

src/frontend/src/features/rooms/components/Conference.tsx

@@ -45,6 +45,7 @@ import { userStore } from '@/stores/user'
 import { WatchMediaDeviceErrors } from './WatchMediaDeviceErrors'
 import { MeetDevtools } from '@/features/devtools'
 import { VOICE_AUDIO_CONSTRAINTS } from '@/features/rooms/livekit/utils/constants'
+import { resolveAudioOutputDeviceId } from '@/features/rooms/utils/resolveAudioOutputDeviceId'
 
 export const Conference = ({
   roomId,
@@ -120,7 +121,7 @@ export const Conference = ({
         ...VOICE_AUDIO_CONSTRAINTS,
       },
       audioOutput: {
-        deviceId: userConfig.audioOutputDeviceId ?? undefined,
+        deviceId: resolveAudioOutputDeviceId(userConfig.audioOutputDeviceId),
       },
     }
     // do not rely on the userConfig object directly as its reference may change on every render

src/frontend/src/features/rooms/livekit/components/controls/Device/OutputSoundTester.tsx

@@ -4,6 +4,7 @@ import { RiVolumeUpLine } from '@remixicon/react'
 import { styled } from '@/styled-system/jsx'
 import { Button } from '@/primitives'
 import { canTestAudioOutput } from '@/features/rooms/utils/canTestAudioOutput'
+import { resolveAudioOutputDeviceId } from '@/features/rooms/utils/resolveAudioOutputDeviceId'
 
 // Speaker test in the audiooutput menu footer (Meet-style UX). Outputs have
 // no track: the test plays a bundled file through the selected sink, and
@@ -66,6 +67,8 @@ export const OutputSoundTester = ({
   const audioRef = useRef<HTMLAudioElement>(null)
   const [isPlaying, setIsPlaying] = useState(false)
 
+  const outputId = resolveAudioOutputDeviceId(sinkId)
+
   const latestSinkIdRef = useRef(sinkId)
   latestSinkIdRef.current = sinkId
 
@@ -79,15 +82,15 @@ export const OutputSoundTester = ({
   }, [])
 
   useEffect(() => {
-    if (!sinkId || !canTestAudioOutput()) return
+    if (!outputId || !canTestAudioOutput()) return
-    audioRef.current?.setSinkId(sinkId).catch(() => {
+    audioRef.current?.setSinkId(outputId).catch(() => {
       // Re-routing failed (stale or unplugged device): stop the test rather
       // than keep playing through the previous sink.
       if (latestSinkIdRef.current === sinkId) {
         stopPlayback()
       }
     })
-  }, [sinkId, stopPlayback])
+  }, [outputId, sinkId, stopPlayback])
 
   useEffect(() => {
     const audio = audioRef.current
@@ -108,8 +111,8 @@ export const OutputSoundTester = ({
             // Confirm routing before starting: a no-op when already routed,
             // but rejects on a stale device id, so the test never plays
             // through the wrong sink.
-            if (sinkId && canTestAudioOutput()) {
+            if (outputId && canTestAudioOutput()) {
-              await audio.setSinkId(sinkId)
+              await audio.setSinkId(outputId)
             }
             await audio.play()
             setIsPlaying(true)

src/frontend/src/features/rooms/utils/resolveAudioOutputDeviceId.ts

@@ -0,0 +1,11 @@
+/**
+ * `'default'` means "use the system output". Firefox has no device with that
+ * id, so setSinkId('default') rejects. Omit it and the browser keeps the OS
+ * default, which is the same result.
+ */
+export const resolveAudioOutputDeviceId = (
+  deviceId: string | undefined
+): string | undefined => {
+  if (!deviceId || deviceId === 'default') return undefined
+  return deviceId
+}

src/frontend/src/primitives/Radio.tsx

@@ -9,6 +9,8 @@ import { type StyledVariantProps } from '@/styled-system/types'
 const StyledRadio = styled(RACRadio, {
   base: {
     display: 'flex',
+    // anchor the visually hidden input, so it scrolls with the radio
+    position: 'relative',
     alignItems: 'center',
     gap: 0.375,
     forcedColorAdjust: 'none',

src/frontend/src/primitives/Switch.tsx

@@ -9,6 +9,8 @@ import { RiCheckLine, RiCloseFill } from '@remixicon/react'
 const StyledSwitch = styled(RACSwitch, {
   base: {
     display: 'flex',
+    // anchor the visually hidden input, so it scrolls with the switch
+    position: 'relative',
     alignItems: 'center',
     gap: '0.571rem',
     color: 'black',

src/frontend/src/primitives/menuRecipe.ts

@@ -25,12 +25,15 @@ export const menuRecipe = sva({
       '&[data-focused]': {
         color: 'primary.text',
         backgroundColor: 'primaryDark.100',
-        outline: 'none!',
       },
       '&[data-hovered]': {
         color: 'primary.text',
         backgroundColor: 'primaryDark.100',
-        outline: 'none!',
+      },
+      '&[data-focus-visible]': {
+        outline: '2px solid',
+        outlineColor: 'focusRing',
+        outlineOffset: '2px',
       },
     },
   },
@@ -49,6 +52,10 @@ export const menuRecipe = sva({
       dark: {
         item: {
           color: 'white',
+          '&[data-focus-visible]': {
+            outlineColor: 'white!',
+            outlineOffset: '2px!',
+          },
         },
       },
     },