Add keyboard navigation per issue getAlby#182

chebizarro · Nov 2, 2024 · dc37c69 · dc37c69
1 parent 863b0b3
commit dc37c69
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 3 deletions.
diff --git a/src/components/bc-currency-switcher.ts b/src/components/bc-currency-switcher.ts
@@ -63,6 +63,7 @@ export class CurrencySwitcher extends withTwind()(BitcoinConnectElement) {
         <div
           class="${classes.interactive}"
           @click=${this._showSelectVisibility}
+          @keydown=${this._handleKeydown}
         >
           <slot></slot>
         </div>
@@ -81,7 +82,10 @@ export class CurrencySwitcher extends withTwind()(BitcoinConnectElement) {
             class="${selectedCurrency === currency.value
               ? 'bg-blue-500 text-white'
               : ''} flex items-center justify-center py-2 px-4 hover:text-white hover:bg-blue-500 rounded-lg hover:border-blue-500 cursor-pointer"
+            tabindex="0"
             @click=${() => this._selectCurrency(currency.value)}
+            @keydown=${(event: KeyboardEvent) =>
+              this._handleCurrencyKeydown(event, currency.value)}
           >
             <span class="text-orange-400 inline-block mr-2 text-xl"
               >${currency.flag}</span
@@ -100,6 +104,22 @@ export class CurrencySwitcher extends withTwind()(BitcoinConnectElement) {
     store.getState().setCurrency(selectedCurrency);
     this._isSwitchingCurrency = false;
   }
+
+  // Handle keydown events for currency selection
+  private _handleCurrencyKeydown(event: KeyboardEvent, currency: string) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this._selectCurrency(currency);
+    }
+  }
+
+  // Handle keydown events for opening the currency list
+  public _handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this._showSelectVisibility();
+    }
+  }
 }
 
 declare global {

diff --git a/src/components/bc-modal-header.ts b/src/components/bc-modal-header.ts
@@ -31,15 +31,19 @@ export class ModalHeader extends withTwind()(BitcoinConnectElement) {
         ${this.showHelp
           ? html`<div
               class="${classes.interactive} ${classes['text-neutral-tertiary']}"
+              tabindex="0"
               @click=${() => store.getState().pushRoute('/help')}
+              @keydown=${this._handleKeydownHelp}
             >
               ${helpIcon}
             </div>`
           : null}
         ${this.closable
           ? html`<div
               class="${classes.interactive} ${classes['text-neutral-tertiary']}"
+              tabindex="0"
               @click=${this._handleClose}
+              @keydown=${this._handleKeydownClose}
             >
               ${crossIcon}
             </div>`
@@ -54,6 +58,22 @@ export class ModalHeader extends withTwind()(BitcoinConnectElement) {
   private _handleClose() {
     this.dispatchEvent(new Event('onclose', {bubbles: true, composed: true}));
   }
+
+  // Handle keyboard interactions for the close button
+  private _handleKeydownClose(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this._handleClose();
+    }
+  }
+
+  // Handle keyboard interactions for the help button
+  private _handleKeydownHelp(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      store.getState().pushRoute('/help');
+    }
+  }
 }
 
 declare global {

diff --git a/src/components/bc-modal.ts b/src/components/bc-modal.ts
@@ -10,6 +10,14 @@ import {closeModal} from '../api';
 
 @customElement('bc-modal')
 export class Modal extends withTwind()(BitcoinConnectElement) {
+  override firstUpdated() {
+    window.addEventListener('keydown', this._handleKeydown);
+  }
+
+  override disconnectedCallback() {
+    window.removeEventListener('keydown', this._handleKeydown);
+  }
+
   override render() {
     return html` <div
       class="fixed top-0 left-0 w-full h-full flex justify-center items-end sm:items-center z-[21000]"
@@ -19,6 +27,7 @@ export class Modal extends withTwind()(BitcoinConnectElement) {
           'bg-foreground'
         ]} animate-darken"
         @click=${this._handleClose}
+        tabindex="0"
       ></div>
       <div
         class="transition-all p-4 pt-6 pb-8 rounded-2xl shadow-2xl flex justify-center items-center w-full bg-white dark:bg-black max-w-md max-sm:rounded-b-none
@@ -32,6 +41,12 @@ export class Modal extends withTwind()(BitcoinConnectElement) {
   private _handleClose = () => {
     closeModal();
   };
+
+  public _handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this._handleClose();
+    }
+  };
 }
 
 declare global {

diff --git a/src/components/bc-navbar.ts b/src/components/bc-navbar.ts
@@ -18,7 +18,9 @@ export class Navbar extends withTwind()(BitcoinConnectElement) {
       <div class="absolute left-8 h-full flex items-center justify-center">
         <div
           class="${classes.interactive} ${classes['text-neutral-tertiary']}"
+          tabindex="0"
           @click=${this._goBack}
+          @keydown=${this._handleKeydown}
         >
           ${backIcon}
         </div>
@@ -33,6 +35,13 @@ export class Navbar extends withTwind()(BitcoinConnectElement) {
     store.getState().popRoute();
     store.getState().setError(undefined);
   };
+
+  public _handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this._goBack();
+    }
+  }
 }
 
 declare global {

diff --git a/src/components/bc-start.ts b/src/components/bc-start.ts
@@ -74,13 +74,22 @@ export class Start extends withTwind()(BitcoinConnectElement) {
                     'text-brand-mixed'
                   ]} "
                   @click=${() => store.getState().pushRoute('/new-wallet')}
+                  @keydown=${this._handleKeydown}
+                  tabindex="0"
                   >Get one here</a
                 >
               </h1>
             </div>
           `}
     </div>`;
   }
+
+  public _handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      store.getState().pushRoute('/new-wallet');
+    }
+  }
 }
 
 declare global {

diff --git a/src/components/connectors/ConnectorElement.ts b/src/components/connectors/ConnectorElement.ts
@@ -30,7 +30,9 @@ export abstract class ConnectorElement extends withTwind()(
   override render() {
     return html`<div
       class="flex flex-col justify-between items-center w-32 -mx-4 cursor-pointer ${classes.interactive}"
+      tabindex="0"
       @click=${this._onClick}
+      @keydown=${this._handleKeydown}
     >
       <div
         class="w-16 h-16 drop-shadow rounded-2xl flex justify-center items-center overflow-hidden"
@@ -48,6 +50,14 @@ export abstract class ConnectorElement extends withTwind()(
     </div>`;
   }
 
+  // Handle keyboard events for accessibility (Enter/Space key triggers click)
+  public _handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this._onClick();
+    }
+  }
+
   protected _connect(
     config: Omit<ConnectorConfig, 'connectorName' | 'connectorType'>
   ) {

diff --git a/src/components/internal/bci-button.ts b/src/components/internal/bci-button.ts
@@ -24,6 +24,11 @@ export class Button extends withTwind()(InternalElement) {
   })
   block = false;
 
+  @property({
+    type: Number,
+  })
+  override tabIndex = 0;
+
   override render() {
     const isDarkMode =
       window.matchMedia &&
@@ -57,6 +62,8 @@ export class Button extends withTwind()(InternalElement) {
         ? `${classes['text-brand-mixed']}`
         : `${classes['text-neutral-tertiary']}`}
         "
+      ?autofocus="${this.variant === 'primary'}"
+      tabindex="${this.tabIndex}"
     >
       ${this.ghost
         ? null

diff --git a/src/components/pages/bc-help.ts b/src/components/pages/bc-help.ts
@@ -40,7 +40,7 @@ export class HelpPage extends withTwind()(BitcoinConnectElement) {
             target="_blank"
             class="${classes['hover-animation']} flex-1"
           >
-            <bci-button>
+            <bci-button tabIndex=-1>
               <span class="${classes['text-brand-mixed']}">Learn more</span>
               ${linkIcon}
             </bci-button>
@@ -50,7 +50,7 @@ export class HelpPage extends withTwind()(BitcoinConnectElement) {
             target="_blank"
             class="${classes['hover-animation']} flex-1"
           >
-            <bci-button>
+            <bci-button tabIndex=-1>
               <span class="${classes['text-brand-mixed']}">Use it</span>
               ${linkIcon}
             </bci-button>

diff --git a/src/components/pages/bc-send-payment.ts b/src/components/pages/bc-send-payment.ts
@@ -146,7 +146,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
       <div class="mt-8 w-full flex flex-col gap-4">
         ${this.paymentMethods === 'all' || this.paymentMethods === 'external'
           ? html`<a href="lightning:${this.invoice}">
-              <bci-button variant="primary" block>
+              <bci-button variant="primary" block tabindex="-1">
                 ${walletIcon} Open in a Bitcoin Wallet
               </bci-button>
             </a>`
@@ -231,6 +231,8 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
       </a>
       <a
         @click=${this._copyInvoice}
+        @keydown=${this._handleKeydown}
+        tabindex="0"
         class="
         flex gap-1
         mt-4
@@ -344,6 +346,14 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
     }
     this._isPaying = false;
   }
+
+  public _handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this._copyInvoice();
+    }
+  }
+
 }
 
 declare global {