linting

coinbase · Nov 21, 2024 · 0eaad7b · 0eaad7b
1 parent 3e8f0ae
commit 0eaad7b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/src/internal/svg/coinbaseWalletSvg.tsx b/src/internal/svg/coinbaseWalletSvg.tsx
@@ -11,8 +11,8 @@ export const coinbaseWalletSvg = (
     <title>Coinbase Wallet Logo</title>
     <rect width="146" height="146" fill="#0052FF" />
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       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"
       fill="white"
     />

diff --git a/src/wallet/components/WalletModal.test.tsx b/src/wallet/components/WalletModal.test.tsx
@@ -216,4 +216,17 @@ describe('WalletModal', () => {
     const overlay = screen.getByTestId('modal-overlay');
     expect(overlay).toHaveClass(customClass, 'bg-black/70');
   });
+
+  it('closes modal on Enter or Space key press', () => {
+    render(<WalletModal isOpen={true} onClose={mockOnClose} />);
+    const overlay = screen.getByTestId('modal-overlay');
+
+    fireEvent.keyDown(overlay, { key: 'Enter' });
+    expect(mockOnClose).toHaveBeenCalled();
+
+    mockOnClose.mockClear();
+
+    fireEvent.keyDown(overlay, { key: ' ' });
+    expect(mockOnClose).toHaveBeenCalled();
+  });
 });
diff --git a/src/wallet/components/WalletModal.tsx b/src/wallet/components/WalletModal.tsx
@@ -68,6 +68,16 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
     }
   }, [connect, connectors, onClose]);
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      onClose();
+    }
+  };
+
+  const handleModalClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
   // Remove from DOM completely when not rendered
   if (!shouldRender) {
     return null;
@@ -82,6 +92,8 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
         className,
       )}
       onClick={onClose}
+      onKeyDown={handleKeyDown}
+      role="presentation"
       data-testid="modal-overlay"
     >
       <div
@@ -96,9 +108,13 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
           '-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2',
           isOpen ? 'animate-fadeIn' : 'animate-fadeOut',
         )}
-        onClick={(e) => e.stopPropagation()}
+        onClick={handleModalClick}
+        onKeyDown={handleKeyDown}
+        role="dialog"
+        aria-modal="true"
       >
         <button
+          type="button"
           onClick={onClose}
           className={cn(
             'absolute top-4 right-4',
@@ -136,6 +152,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
 
         <div className="flex flex-col gap-3">
           <button
+            type="button"
             onClick={handleSmartWalletConnector}
             className={cn(
               border.radiusInner,
@@ -170,6 +187,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
           </div>
 
           <button
+            type="button"
             onClick={handleCoinbaseWalletConnector}
             className={cn(
               border.default,
@@ -187,6 +205,7 @@ export function WalletModal({ isOpen, onClose, className }: WalletModalProps) {
           </button>
 
           <button
+            type="button"
             onClick={handleWalletConnectConnector}
             className={cn(
               border.default,