♿️(frontend) add explicit region for call controls

Declare a dedicated ARIA region for call controls
to improve accessibility.

Extract this region into a reusable component for better
consistency and maintainability.

src/frontend/src/features/layout/components/ControlBarRegion.tsx

@@ -0,0 +1,44 @@
+import { cva, RecipeVariantProps } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+
+const controlBarRegion = cva({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    flex: '1 1 33%',
+    justifyContent: 'center',
+    gap: '0.65rem',
+  },
+  variants: {
+    mobile: {
+      true: {
+        justifyContent: 'space-between',
+        width: '330px',
+      },
+    },
+  },
+  defaultVariants: {
+    mobile: false,
+  },
+})
+
+export type ControlBarRegionProps = React.HTMLAttributes<HTMLDivElement> &
+  RecipeVariantProps<typeof controlBarRegion>
+
+export function ControlBarRegion({
+  children,
+  mobile,
+  ...props
+}: ControlBarRegionProps) {
+  const { t } = useTranslation('rooms')
+  return (
+    <div
+      role="region"
+      aria-label={t('controls.region')}
+      className={controlBarRegion({ mobile })}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx

@@ -15,6 +15,7 @@ import { useFullScreen } from '../../hooks/useFullScreen'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
+import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
 
 export function DesktopControlBar({
   onDeviceError,
@@ -61,15 +62,7 @@ export function DesktopControlBar({
           marginLeft: '0.5rem',
         })}
       />
-      <div
-        className={css({
-          flex: '1 1 33%',
-          alignItems: 'center',
-          justifyContent: 'center',
-          display: 'flex',
-          gap: '0.65rem',
-        })}
-      >
+      <ControlBarRegion>
         <AudioDevicesControl
           onDeviceError={(error) =>
             onDeviceError?.({ source: Track.Source.Microphone, error })
@@ -93,7 +86,7 @@ export function DesktopControlBar({
         <OptionsButton />
         <LeaveButton />
         <StartMediaButton />
-      </div>
+      </ControlBarRegion>
       <MoreOptions parentElement={desktopControlBarEl} />
     </div>
   )

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -25,6 +25,7 @@ import { useConfig } from '@/api/useConfig'
 import { AudioDevicesControl } from '../../components/controls/Device/AudioDevicesControl'
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
 import { useSettingsDialog } from '@/features/settings/hook/useSettingsDialog'
+import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
 
 export function MobileControlBar({
   onDeviceError,
@@ -47,13 +48,7 @@ export function MobileControlBar({
           justifyContent: 'center',
         })}
       >
-        <div
-          className={css({
-            display: 'flex',
-            justifyContent: 'space-between',
-            width: '330px',
-          })}
-        >
+        <ControlBarRegion mobile>
           <LeaveButton />
           <AudioDevicesControl
             onDeviceError={(error) =>
@@ -78,7 +73,7 @@ export function MobileControlBar({
           >
             <RiMore2Line />
           </Button>
-        </div>
+        </ControlBarRegion>
       </div>
       <ResponsiveMenu
         isOpened={isMenuOpened}

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

@@ -166,6 +166,7 @@
     "countdownAnnouncement": "Das Meeting endet in {{duration}}."
   },
   "controls": {
+    "region": "Anrufsteuerung",
     "microphone": "Mikrofon",
     "camera": "Kamera",
     "chat": {

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

@@ -166,6 +166,7 @@
     "countdownAnnouncement": "Call ends in {{duration}}."
   },
   "controls": {
+    "region": "Call controls",
     "microphone": "Microphone",
     "camera": "Camera",
     "chat": {

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

@@ -166,6 +166,7 @@
     "countdownAnnouncement": "L'appel se termine dans {{duration}}."
   },
   "controls": {
+    "region": "Commandes pour les appels",
     "microphone": "Microphone",
     "camera": "Camera",
     "chat": {

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

@@ -166,6 +166,7 @@
     "countdownAnnouncement": "Het gesprek eindigt over {{duration}}."
   },
   "controls": {
+    "region": "Gespreksbesturing",
     "microphone": "Microfoon",
     "camera": "Camera",
     "chat": {