fix: close sidebar overlay on Escape key + aria-hidden for screen readers
This commit is contained in:
16
src/App.tsx
16
src/App.tsx
@@ -1,4 +1,4 @@
|
|||||||
import { useState } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useGateway } from './hooks/useGateway';
|
import { useGateway } from './hooks/useGateway';
|
||||||
import { Header } from './components/Header';
|
import { Header } from './components/Header';
|
||||||
import { Sidebar } from './components/Sidebar';
|
import { Sidebar } from './components/Sidebar';
|
||||||
@@ -14,6 +14,18 @@ export default function App() {
|
|||||||
} = useGateway();
|
} = useGateway();
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
|
|
||||||
|
// Close sidebar on Escape key
|
||||||
|
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
||||||
|
if (e.key === 'Escape' && sidebarOpen) {
|
||||||
|
setSidebarOpen(false);
|
||||||
|
}
|
||||||
|
}, [sidebarOpen]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
}, [handleKeyDown]);
|
||||||
|
|
||||||
// Still checking stored credentials
|
// Still checking stored credentials
|
||||||
if (authenticated === null) {
|
if (authenticated === null) {
|
||||||
return (
|
return (
|
||||||
@@ -37,7 +49,7 @@ export default function App() {
|
|||||||
open={sidebarOpen}
|
open={sidebarOpen}
|
||||||
onClose={() => setSidebarOpen(false)}
|
onClose={() => setSidebarOpen(false)}
|
||||||
/>
|
/>
|
||||||
<div className="flex-1 flex flex-col min-w-0">
|
<div className="flex-1 flex flex-col min-w-0" aria-hidden={sidebarOpen ? true : undefined}>
|
||||||
<Header status={status} sessionKey={activeSession} onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} activeSessionData={sessions.find(s => s.key === activeSession)} onLogout={logout} />
|
<Header status={status} sessionKey={activeSession} onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} activeSessionData={sessions.find(s => s.key === activeSession)} onLogout={logout} />
|
||||||
<ConnectionBanner status={status} />
|
<ConnectionBanner status={status} />
|
||||||
<Chat messages={messages} isGenerating={isGenerating} status={status} onSend={sendMessage} onAbort={abort} />
|
<Chat messages={messages} isGenerating={isGenerating} status={status} onSend={sendMessage} onAbort={abort} />
|
||||||
|
|||||||
Reference in New Issue
Block a user