fix(accessibility): Use buttons for modal backdrops

This commit is contained in:
SyedaAnshrahGillani
2025-10-01 17:04:35 +05:00
parent 3c9a4cab82
commit 2a5d27ffc0

View File

@@ -491,9 +491,10 @@ function AppContent() {
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center"> <div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Backdrop */} {/* Backdrop */}
<div <button
className="fixed inset-0 bg-black/50 backdrop-blur-sm" className="fixed inset-0 bg-black/50 backdrop-blur-sm"
onClick={() => setShowVersionModal(false)} onClick={() => setShowVersionModal(false)}
aria-label="Close version upgrade modal"
/> />
{/* Modal */} {/* Modal */}
@@ -604,7 +605,7 @@ function AppContent() {
<div className={`fixed inset-0 z-50 flex transition-all duration-150 ease-out ${ <div className={`fixed inset-0 z-50 flex transition-all duration-150 ease-out ${
sidebarOpen ? 'opacity-100 visible' : 'opacity-0 invisible' sidebarOpen ? 'opacity-100 visible' : 'opacity-0 invisible'
}`}> }`}>
<div <button
className="fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-150 ease-out" className="fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-150 ease-out"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@@ -615,6 +616,7 @@ function AppContent() {
e.stopPropagation(); e.stopPropagation();
setSidebarOpen(false); setSidebarOpen(false);
}} }}
aria-label="Close sidebar"
/> />
<div <div
className={`relative w-[85vw] max-w-sm sm:w-80 bg-card border-r border-border transform transition-transform duration-150 ease-out ${ className={`relative w-[85vw] max-w-sm sm:w-80 bg-card border-r border-border transform transition-transform duration-150 ease-out ${