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 = ({ })} >