♿️(frontend) fix accessibility issue in the hint paragraph

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

@@ -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"