From 6c4f0632b8d3dfc117c9ae12c73fa3f8ad95e984 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 11 Aug 2026 22:00:24 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20fix=20accessibil?=
 =?UTF-8?q?ity=20issue=20in=20the=20hint=20paragraph?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor the hint paragraph markup and semantics to resolve an
accessibility issue flagged on it, so assistive technologies expose
it correctly to users.
---
 src/frontend/src/features/rooms/components/Join.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Join.tsx b/src/frontend/src/features/rooms/components/Join.tsx
index 1c943367..caaffd39 100644
--- a/src/frontend/src/features/rooms/components/Join.tsx
+++ b/src/frontend/src/features/rooms/components/Join.tsx
@@ -339,6 +339,8 @@ const VideoPreview = ({
     videoStarted,
   })
 
+  const isError = cameraMissing || cameraDenied
+
   return (
     <div className={styles.previewFrame}>
       <div className={styles.gradientTop} />
@@ -367,8 +369,13 @@ const VideoPreview = ({
               />
             </div>
           </div>
-          <div role="alert" className={styles.hintOverlay}>
-            <p className={styles.hintText}>{hint && t(hint)}</p>
+          <div className={styles.hintOverlay}>
+            <p role="alert" className={styles.hintText}>
+              {isError && hint ? t(hint) : null}
+            </p>
+            <p role="status" className={styles.hintText}>
+              {!isError && hint ? t(hint) : null}
+            </p>
             {permissionsButtonLabel && (
               <Button
                 size="sm"