✨(frontend) add SR announcements for transcript and recording

announce transcript and record events to sr to provide clear feedback

Signed-off-by: Cyril <c.gromoff@gmail.com>

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

@@ -1,6 +1,6 @@
 import { css } from '@/styled-system/css'
 import { useTranslation } from 'react-i18next'
-import { useMemo } from 'react'
+import { useMemo, useRef, useState, useEffect } from 'react'
 import { Text } from '@/primitives'
 import {
   RecordingMode,
@@ -21,6 +21,9 @@ export const RecordingStateToast = () => {
 
   const { openTranscript, openScreenRecording } = useSidePanel()
 
+  const [srMessage, setSrMessage] = useState('')
+  const lastKeyRef = useRef('')
+
   const hasTranscriptAccess = useHasRecordingAccess(
     RecordingMode.Transcript,
     FeatureFlags.Transcript
@@ -67,6 +70,23 @@ export const RecordingStateToast = () => {
     return `${metadata.recording_mode}.${status}`
   }, [metadata, isStarted, isStarting, isRecording])
 
+  // 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 null
 
   const hasScreenRecordingAccessAndActive =
@@ -74,6 +94,17 @@ export const RecordingStateToast = () => {
   const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess
 
   return (
+    <>
+      {/* Screen reader only message to announce state changes once */}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {srMessage}
+      </div>
+      {/* Visual banner (without aria-live to avoid duplicate announcements) */}
       <div
         className={css({
           display: 'flex',
@@ -95,7 +126,8 @@ export const RecordingStateToast = () => {
           isTranscriptActive={isTranscriptActive}
         />
 
-      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
+        {!hasScreenRecordingAccessAndActive &&
+          !hasTranscriptAccessAndActive && (
             <Text
               variant={'sm'}
               className={css({
@@ -130,5 +162,6 @@ export const RecordingStateToast = () => {
           </RACButton>
         )}
       </div>
+    </>
   )
 }