Skip to content

Commit 0eaad7b

Browse files
committed
linting
1 parent 3e8f0ae commit 0eaad7b

File tree

3 files changed

+35
-3
lines changed

3 files changed

+35
-3
lines changed

src/internal/svg/coinbaseWalletSvg.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export const coinbaseWalletSvg = (
1111
<title>Coinbase Wallet Logo</title>
1212
<rect width="146" height="146" fill="#0052FF" />
1313
<path
14-
fill-rule="evenodd"
15-
clip-rule="evenodd"
14+
fillRule="evenodd"
15+
clipRule="evenodd"
1616
d="M21.9 73C21.9 102.053 45.1466 125.3 74.2 125.3C103.253 125.3 126.5 102.053 126.5 73C126.5 43.9466 103.253 20.7 74.2 20.7C45.1466 20.7 21.9 43.9466 21.9 73ZM60.5 54.75C58.5673 54.75 57 56.3173 57 58.25V87.75C57 89.6827 58.5673 91.25 60.5 91.25H87.9C89.8327 91.25 91.4 89.6827 91.4 87.75V58.25C91.4 56.3173 89.8327 54.75 87.9 54.75H60.5Z"
1717
fill="white"
1818
/>

src/wallet/components/WalletModal.test.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -216,4 +216,17 @@ describe('WalletModal', () => {
216216
const overlay = screen.getByTestId('modal-overlay');
217217
expect(overlay).toHaveClass(customClass, 'bg-black/70');
218218
});
219+
220+
it('closes modal on Enter or Space key press', () => {
221+
render(<WalletModal isOpen={true} onClose={mockOnClose} />);
222+
const overlay = screen.getByTestId('modal-overlay');
223+
224+
fireEvent.keyDown(overlay, { key: 'Enter' });
225+
expect(mockOnClose).toHaveBeenCalled();
226+
227+
mockOnClose.mockClear();
228+
229+
fireEvent.keyDown(overlay, { key: ' ' });
230+
expect(mockOnClose).toHaveBeenCalled();
231+
});
219232
});

src/wallet/components/WalletModal.tsx

+20-1
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,16 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
6868
}
6969
}, [connect, connectors, onClose]);
7070

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+
7181
// Remove from DOM completely when not rendered
7282
if (!shouldRender) {
7383
return null;
@@ -82,6 +92,8 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
8292
className,
8393
)}
8494
onClick={onClose}
95+
onKeyDown={handleKeyDown}
96+
role="presentation"
8597
data-testid="modal-overlay"
8698
>
8799
<div
@@ -96,9 +108,13 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
96108
'-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2',
97109
isOpen ? 'animate-fadeIn' : 'animate-fadeOut',
98110
)}
99-
onClick={(e) => e.stopPropagation()}
111+
onClick={handleModalClick}
112+
onKeyDown={handleKeyDown}
113+
role="dialog"
114+
aria-modal="true"
100115
>
101116
<button
117+
type="button"
102118
onClick={onClose}
103119
className={cn(
104120
'absolute top-4 right-4',
@@ -136,6 +152,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
136152

137153
<div className="flex flex-col gap-3">
138154
<button
155+
type="button"
139156
onClick={handleSmartWalletConnector}
140157
className={cn(
141158
border.radiusInner,
@@ -170,6 +187,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
170187
</div>
171188

172189
<button
190+
type="button"
173191
onClick={handleCoinbaseWalletConnector}
174192
className={cn(
175193
border.default,
@@ -187,6 +205,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
187205
</button>
188206

189207
<button
208+
type="button"
190209
onClick={handleWalletConnectConnector}
191210
className={cn(
192211
border.default,

0 commit comments

Comments
 (0)