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