♻️(frontend) autofocus stop button in fullscreen share warning

Replace the focus effect and ref with autoFocus on the stop button.

CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to
 - ✨(summary) generalized stt api call #1420
 - ♻️(env) refactor env variables handling
 - 🚸(frontend) use "Advanced" instead of "Premium" in the sidepanel
+- ♿️(frontend) make fullscreen share warning keyboard accessible #1459
 
 ### Fixed
 

src/frontend/src/features/rooms/livekit/components/FullScreenShareWarning.tsx

@@ -1,6 +1,6 @@
 import { css } from '@/styled-system/css'
 import { Button, Text } from '@/primitives'
-import { useMemo, useRef } from 'react'
+import { useCallback, useMemo, useRef } from 'react'
 import { screenSharePreferenceStore } from '@/stores/screenSharePreferences'
 import { useSnapshot } from 'valtio'
 import { useLocalParticipant } from '@livekit/components-react'
@@ -61,9 +61,19 @@ export const FullScreenShareWarning = ({
     await localParticipant.setScreenShareEnabled(false, {}, {})
   }
 
-  const handleDismissWarning = () => {
+  const handleDismissWarning = useCallback(() => {
     screenSharePreferenceStore.enabled = false
-  }
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation()
+        handleDismissWarning()
+      }
+    },
+    [handleDismissWarning]
+  )
 
   if (!shouldShowWarning) return null
 
@@ -98,6 +108,7 @@ export const FullScreenShareWarning = ({
             })}
           >
             <Text
+              role="alert"
               style={{
                 color: 'white',
                 flexBasis: '55%',
@@ -117,11 +128,14 @@ export const FullScreenShareWarning = ({
               })}
             >
               <Button
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus
                 variant="tertiary"
                 size="sm"
                 style={{
                   height: 'fit-content',
                 }}
+                onKeyDown={handleKeyDown}
                 onPress={async () => {
                   await handleStopScreenShare()
                 }}
@@ -134,6 +148,7 @@ export const FullScreenShareWarning = ({
                 style={{
                   height: 'fit-content',
                 }}
+                onKeyDown={handleKeyDown}
                 onPress={() => handleDismissWarning()}
               >
                 {t('ignore')}