✨(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,61 +94,74 @@ export const RecordingStateToast = () => {
   const hasTranscriptAccessAndActive = isTranscriptActive && hasTranscriptAccess
 
   return (
-    <div
+    <>
-      className={css({
+      {/* Screen reader only message to announce state changes once */}
-        display: 'flex',
+      <div
-        position: 'fixed',
+        role="status"
-        top: '10px',
+        aria-live="polite"
-        left: '10px',
+        aria-atomic="true"
-        paddingY: '0.25rem',
+        className="sr-only"
-        paddingX: '0.75rem 0.75rem',
+      >
-        backgroundColor: 'danger.700',
+        {srMessage}
-        borderColor: 'white',
+      </div>
-        border: '1px solid',
+      {/* Visual banner (without aria-live to avoid duplicate announcements) */}
-        color: 'white',
+      <div
-        borderRadius: '4px',
+        className={css({
-        gap: '0.5rem',
+          display: 'flex',
-      })}
+          position: 'fixed',
-    >
+          top: '10px',
-      <RecordingStatusIcon
+          left: '10px',
-        isStarted={isStarted}
+          paddingY: '0.25rem',
-        isTranscriptActive={isTranscriptActive}
+          paddingX: '0.75rem 0.75rem',
-      />
+          backgroundColor: 'danger.700',
+          borderColor: 'white',
+          border: '1px solid',
+          color: 'white',
+          borderRadius: '4px',
+          gap: '0.5rem',
+        })}
+      >
+        <RecordingStatusIcon
+          isStarted={isStarted}
+          isTranscriptActive={isTranscriptActive}
+        />
 
-      {!hasScreenRecordingAccessAndActive && !hasTranscriptAccessAndActive && (
+        {!hasScreenRecordingAccessAndActive &&
-        <Text
+          !hasTranscriptAccessAndActive && (
-          variant={'sm'}
+            <Text
-          className={css({
+              variant={'sm'}
-            fontWeight: '500 !important',
+              className={css({
-          })}
+                fontWeight: '500 !important',
-        >
+              })}
-          {t(key)}
+            >
-        </Text>
+              {t(key)}
-      )}
+            </Text>
-      {hasScreenRecordingAccessAndActive && (
+          )}
-        <RACButton
+        {hasScreenRecordingAccessAndActive && (
-          onPress={openScreenRecording}
+          <RACButton
-          className={css({
+            onPress={openScreenRecording}
-            textStyle: 'sm !important',
+            className={css({
-            fontWeight: '500 !important',
+              textStyle: 'sm !important',
-            cursor: 'pointer',
+              fontWeight: '500 !important',
-          })}
+              cursor: 'pointer',
-        >
+            })}
-          {t(key)}
+          >
-        </RACButton>
+            {t(key)}
-      )}
+          </RACButton>
-      {hasTranscriptAccessAndActive && (
+        )}
-        <RACButton
+        {hasTranscriptAccessAndActive && (
-          onPress={openTranscript}
+          <RACButton
-          className={css({
+            onPress={openTranscript}
-            textStyle: 'sm !important',
+            className={css({
-            fontWeight: '500 !important',
+              textStyle: 'sm !important',
-            cursor: 'pointer',
+              fontWeight: '500 !important',
-          })}
+              cursor: 'pointer',
-        >
+            })}
-          {t(key)}
+          >
-        </RACButton>
+            {t(key)}
-      )}
+          </RACButton>
-    </div>
+        )}
+      </div>
+    </>
   )
 }