@@ -68,6 +68,16 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
68
68
}
69
69
} , [ connect , connectors , onClose ] ) ;
70
70
71
+ const handleKeyDown = ( e : React . KeyboardEvent ) => {
72
+ if ( e . key === 'Enter' || e . key === ' ' ) {
73
+ onClose ( ) ;
74
+ }
75
+ } ;
76
+
77
+ const handleModalClick = ( e : React . MouseEvent ) => {
78
+ e . stopPropagation ( ) ;
79
+ } ;
80
+
71
81
// Remove from DOM completely when not rendered
72
82
if ( ! shouldRender ) {
73
83
return null ;
@@ -82,6 +92,8 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
82
92
className ,
83
93
) }
84
94
onClick = { onClose }
95
+ onKeyDown = { handleKeyDown }
96
+ role = "presentation"
85
97
data-testid = "modal-overlay"
86
98
>
87
99
< div
@@ -96,9 +108,13 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
96
108
'-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2' ,
97
109
isOpen ? 'animate-fadeIn' : 'animate-fadeOut' ,
98
110
) }
99
- onClick = { ( e ) => e . stopPropagation ( ) }
111
+ onClick = { handleModalClick }
112
+ onKeyDown = { handleKeyDown }
113
+ role = "dialog"
114
+ aria-modal = "true"
100
115
>
101
116
< button
117
+ type = "button"
102
118
onClick = { onClose }
103
119
className = { cn (
104
120
'absolute top-4 right-4' ,
@@ -136,6 +152,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
136
152
137
153
< div className = "flex flex-col gap-3" >
138
154
< button
155
+ type = "button"
139
156
onClick = { handleSmartWalletConnector }
140
157
className = { cn (
141
158
border . radiusInner ,
@@ -170,6 +187,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
170
187
</ div >
171
188
172
189
< button
190
+ type = "button"
173
191
onClick = { handleCoinbaseWalletConnector }
174
192
className = { cn (
175
193
border . default ,
@@ -187,6 +205,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
187
205
</ button >
188
206
189
207
< button
208
+ type = "button"
190
209
onClick = { handleWalletConnectConnector }
191
210
className = { cn (
192
211
border . default ,
0 commit comments