shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y: add role and keyboard dismiss to overlay backdrops in Sidebar

Browse Source
This commit is contained in:
Nicolas Varrot
2026-02-27 09:02:19 +00:00
parent 8279687898
commit 88c98f4a66
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Sidebar.tsx
View File

@@ -343,7 +343,7 @@ export function Sidebar({ sessions, activeSession, onSwitch, onDelete, onSplit,
return ( return (
<> <>
{open && <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden" onClick={onClose} />} {open && <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden" onClick={onClose} onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }} role="button" tabIndex={-1} aria-label="Close sidebar" />}
<aside role="navigation" aria-label="Sessions" className={`fixed lg:relative top-0 left-0 h-full bg-[var(--pc-bg-base)]/95 border-r border-pc-border z-50 transform ${dragging ? '' : 'transition-transform'} lg:translate-x-0 ${open ? 'translate-x-0' : '-translate-x-full'} flex flex-col backdrop-blur-xl`} style={{ width: `${width}px` }}> <aside role="navigation" aria-label="Sessions" className={`fixed lg:relative top-0 left-0 h-full bg-[var(--pc-bg-base)]/95 border-r border-pc-border z-50 transform ${dragging ? '' : 'transition-transform'} lg:translate-x-0 ${open ? 'translate-x-0' : '-translate-x-full'} flex flex-col backdrop-blur-xl`} style={{ width: `${width}px` }}>
<div className="h-14 flex items-center justify-between px-4 border-b border-pc-border"> <div className="h-14 flex items-center justify-between px-4 border-b border-pc-border">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -657,7 +657,7 @@ export function Sidebar({ sessions, activeSession, onSwitch, onDelete, onSplit,
{/* Delete confirmation dialog */} {/* Delete confirmation dialog */}
{confirmDelete && ( {confirmDelete && (
<> <>
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[70]" onClick={() => setConfirmDelete(null)} /> <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[70]" onClick={() => setConfirmDelete(null)} onKeyDown={(e) => { if (e.key === 'Escape') setConfirmDelete(null); }} role="button" tabIndex={-1} aria-label="Cancel deletion" />
<div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[80] w-72 bg-[var(--pc-bg-base)] border border-pc-border-strong rounded-2xl p-5 shadow-2xl"> <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[80] w-72 bg-[var(--pc-bg-base)] border border-pc-border-strong rounded-2xl p-5 shadow-2xl">
<p className="text-sm text-pc-text mb-4">{t('sidebar.deleteConfirm')}</p> <p className="text-sm text-pc-text mb-4">{t('sidebar.deleteConfirm')}</p>
<div className="flex gap-2 justify-end"> <div className="flex gap-2 justify-end">