From e8739d7e700927282154ea49fdeb752c906c62d0 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Thu, 26 Feb 2026 09:59:30 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20improve=20JoinMe?=
 =?UTF-8?q?etingDialog=20screen=20reader?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Focus input on modal open and improve screen reader announcements
---
 CHANGELOG.md                                  |  4 +-
 .../home/components/JoinMeetingDialog.tsx     | 49 ++++++++++---------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f14b8291..ae5323ba 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/frontend/src/features/home/components/JoinMeetingDialog.tsx b/src/frontend/src/features/home/components/JoinMeetingDialog.tsx
index 53ff0c82..78004426 100644
--- a/src/frontend/src/features/home/components/JoinMeetingDialog.tsx
+++ b/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
-        onSubmit={(data) => {
-          navigateTo(
-            'room',
-            (data.roomId as string)
-              .trim()
-              .replace(`${window.location.origin}/`, '')
-          )
-        }}
-        submitLabel={t('joinInputSubmit')}
-      >
+      <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={(value) => {
-            return !isRoomValid(value.trim()) ? (
-              <>
-                <p>{t('joinInputError')}</p>
-                <Ul>
-                  <li>{window.location.origin}/uio-azer-jkl</li>
-                  <li>uio-azer-jkl</li>
-                </Ul>
-              </>
-            ) : null
-          }}
+          validate={validateRoomId}
         />
       </Form>
       <H lvl={2}>{t('joinMeetingTipHeading')}</H>