From d54e9c2ad02c8c5fec964d3fffb6eaa80b7d4b37 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Tue, 30 Jun 2026 10:05:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20autofocus=20stop?=
 =?UTF-8?q?=20button=20in=20fullscreen=20share=20warning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the focus effect and ref with autoFocus on the stop button.
---
 CHANGELOG.md                                  |  1 +
 .../components/FullScreenShareWarning.tsx     | 21 ++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1189ff2..247c208a 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/src/features/rooms/livekit/components/FullScreenShareWarning.tsx b/src/frontend/src/features/rooms/livekit/components/FullScreenShareWarning.tsx
index 1849a7bc..da74aba4 100644
--- a/src/frontend/src/features/rooms/livekit/components/FullScreenShareWarning.tsx
+++ b/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')}