♿️(frontend) improve JoinMeetingDialog screen reader

Focus input on modal open and improve screen reader announcements

CHANGELOG.md

@@ -22,13 +22,13 @@ and this project adheres to
 - 🚚(frontend) rename "wellknown" directory to "well-known" #1009
 - 🌐(frontend) localize SR modifier labels #1010
 - ⬆️(backend) update python dependencies #1011
-- ♿️(a11y) fix focus ring on tab container components
+- ♿️(frontend) fix focus ring on tab container components #1012
+- ♿️(frontend) upgrade join meeting modal accessibility #1027
 
 ### Fixed
 
 - 🩹(frontend) fix German language preference update #1021
 
-
 ## [1.8.0] - 2026-02-20
 
 ### Changed

src/frontend/src/features/home/components/JoinMeetingDialog.tsx

@@ -5,28 +5,18 @@ import { isRoomValid } from '@/features/rooms'
 
 export const JoinMeetingDialog = () => {
   const { t } = useTranslation('home')
-  return (
+
-    <Dialog title={t('joinMeeting')}>
+  const handleSubmit = (data: { roomId?: FormDataEntryValue }) => {
-      <Form
+    const roomId = (data.roomId as string)
-        onSubmit={(data) => {
-          navigateTo(
-            'room',
-            (data.roomId as string)
       .trim()
       .replace(`${window.location.origin}/`, '')
-          )
+    navigateTo('room', roomId)
-        }}
+  }
-        submitLabel={t('joinInputSubmit')}
+
-      >
+  const validateRoomId = (value: string) => {
-        <Field
+    const trimmed = value.trim()
-          type="text"
+    if (!trimmed) return null
-          name="roomId"
+    return !isRoomValid(trimmed) ? (
-          label={t('joinInputLabel')}
-          description={t('joinInputExample', {
-            example: window.origin + '/azer-tyu-qsdf',
-          })}
-          validate={(value) => {
-            return !isRoomValid(value.trim()) ? (
       <>
         <p>{t('joinInputError')}</p>
         <Ul>
@@ -35,7 +25,22 @@ export const JoinMeetingDialog = () => {
         </Ul>
       </>
     ) : null
-          }}
+  }
+
+  return (
+    <Dialog title={t('joinMeeting')}>
+      <Form onSubmit={handleSubmit} submitLabel={t('joinInputSubmit')}>
+        {/* eslint-disable jsx-a11y/no-autofocus -- Focus on input when modal opens, required for accessibility */}
+        <Field
+          type="text"
+          autoFocus
+          isRequired
+          name="roomId"
+          label={t('joinInputLabel')}
+          description={t('joinInputExample', {
+            example: window.origin + '/azer-tyu-qsdf',
+          })}
+          validate={validateRoomId}
         />
       </Form>
       <H lvl={2}>{t('joinMeetingTipHeading')}</H>