✨(frontend) add SR announcements for transcript and recording

announce transcript and record events to sr to provide clear feedback

Signed-off-by: Cyril <[email protected]>

src/frontend/src/features/recording/components/RecordingStateToast.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useSnapshot } from 'valtio'
 import { useRoomContext } from '@livekit/components-react'
 import { Spinner } from '@/primitives/Spinner'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Text } from '@/primitives'
 import { RoomEvent } from 'livekit-client'
 import { decodeNotificationDataReceived } from '@/features/notifications/utils'
@@ -31,6 +31,9 @@ export const RecordingStateToast = () => {
   const { openTranscript, openScreenRecording } = useSidePanel()
   const [isAlertOpen, setIsAlertOpen] = useState(false)
 
+  const [srMessage, setSrMessage] = useState('')
+  const lastKeyRef = useRef('')
+
   const recordingSnap = useSnapshot(recordingStore)
 
   const hasTranscriptAccess = useHasRecordingAccess(
@@ -128,6 +131,23 @@ export const RecordingStateToast = () => {
     }
   }, [recordingSnap])
 
+  // Update screen reader message only when the key actually changes
+  // This prevents duplicate announcements caused by re-renders
+  useEffect(() => {
+    if (key && key !== lastKeyRef.current) {
+      lastKeyRef.current = key
+      const message = t(key)
+      setSrMessage(message)
+
+      // Clear message after 3 seconds to prevent it from being announced again
+      const timer = setTimeout(() => {
+        setSrMessage('')
+      }, 3000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [key, t])
+
   if (!key)
     return isAdminOrOwner ? (
       <LimitReachedAlertDialog
@@ -144,67 +164,81 @@ export const RecordingStateToast = () => {
   const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess
 
   return (
-    <div
-      className={css({
-        display: 'flex',
-        position: 'fixed',
-        top: '10px',
-        left: '10px',
-        paddingY: '0.25rem',
-        paddingX: '0.75rem 0.75rem',
-        backgroundColor: 'danger.700',
-        borderColor: 'white',
-        border: '1px solid',
-        color: 'white',
-        borderRadius: '4px',
-        gap: '0.5rem',
-      })}
-    >
-      {isStarted ? (
-        <RiRecordCircleLine
-          size={20}
-          className={css({
-            animation: 'pulse_background 1s infinite',
-          })}
-        />
-      ) : (
-        <Spinner size={20} variant="dark" />
-      )}
+    <>
+      {/* Screen reader only message to announce state changes once */}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {srMessage}
+      </div>
 
-      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
-        <Text
-          variant={'sm'}
-          className={css({
-            fontWeight: '500 !important',
-          })}
-        >
-          {t(key)}
-        </Text>
-      )}
-      {hasScreenRecordingAccessAndActive && (
-        <RACButton
-          onPress={openScreenRecording}
-          className={css({
-            textStyle: 'sm !important',
-            fontWeight: '500 !important',
-            cursor: 'pointer',
-          })}
-        >
-          {t(key)}
-        </RACButton>
-      )}
-      {hasTranscriptAccessAndActive && (
-        <RACButton
-          onPress={openTranscript}
-          className={css({
-            textStyle: 'sm !important',
-            fontWeight: '500 !important',
-            cursor: 'pointer',
-          })}
-        >
-          {t(key)}
-        </RACButton>
-      )}
-    </div>
+      {/* Visual banner (without aria-live to avoid duplicate announcements) */}
+      <div
+        className={css({
+          display: 'flex',
+          position: 'fixed',
+          top: '10px',
+          left: '10px',
+          paddingY: '0.25rem',
+          paddingX: '0.75rem 0.75rem',
+          backgroundColor: 'danger.700',
+          borderColor: 'white',
+          border: '1px solid',
+          color: 'white',
+          borderRadius: '4px',
+          gap: '0.5rem',
+        })}
+      >
+        {isStarted ? (
+          <RiRecordCircleLine
+            size={20}
+            className={css({
+              animation: 'pulse_background 1s infinite',
+            })}
+          />
+        ) : (
+          <Spinner size={20} variant="dark" />
+        )}
+
+        {!hasScreenRecordingAccessAndActive &&
+          !hasTranscriptAccessAndActive && (
+            <Text
+              variant={'sm'}
+              className={css({
+                fontWeight: '500 !important',
+              })}
+            >
+              {t(key)}
+            </Text>
+          )}
+        {hasScreenRecordingAccessAndActive && (
+          <RACButton
+            onPress={openScreenRecording}
+            className={css({
+              textStyle: 'sm !important',
+              fontWeight: '500 !important',
+              cursor: 'pointer',
+            })}
+          >
+            {t(key)}
+          </RACButton>
+        )}
+        {hasTranscriptAccessAndActive && (
+          <RACButton
+            onPress={openTranscript}
+            className={css({
+              textStyle: 'sm !important',
+              fontWeight: '500 !important',
+              cursor: 'pointer',
+            })}
+          >
+            {t(key)}
+          </RACButton>
+        )}
+      </div>
+    </>
   )
 }