From 508a76e0e1d23326f776d4d3d8727152d8063e56 Mon Sep 17 00:00:00 2001
From: Chris Daley <chebizarro@gmail.com>
Date: Wed, 23 Oct 2024 22:56:58 -0700
Subject: [PATCH] Add keyboard navigation per issue #182

---
 src/components/bc-balance.ts                  |  5 ++
 src/components/bc-button.ts                   |  3 +
 src/components/bc-currency-switcher.ts        | 25 +++++++
 src/components/bc-modal-header.ts             | 26 +++++++
 src/components/bc-modal.ts                    | 16 +++-
 src/components/bc-navbar.ts                   | 23 +++++-
 src/components/bc-pay-button.ts               | 11 ++-
 src/components/bc-router-outlet.ts            |  4 +-
 src/components/bc-start.ts                    | 25 +++++--
 src/components/connectors/ConnectorElement.ts | 14 ++++
 src/components/flows/bc-connect.ts            | 23 +++++-
 src/components/flows/bc-payment.ts            | 30 +++++++-
 src/components/internal/InternalElement.ts    | 12 ++-
 src/components/internal/bci-button.ts         | 21 ++++++
 src/components/internal/bci-connecting.ts     |  6 ++
 src/components/pages/bc-help.ts               |  4 +-
 src/components/pages/bc-lnbits.ts             | 11 ++-
 src/components/pages/bc-lnfi.ts               |  5 +-
 src/components/pages/bc-send-payment.ts       | 73 ++++++++++++++-----
 19 files changed, 295 insertions(+), 42 deletions(-)

diff --git a/src/components/bc-balance.ts b/src/components/bc-balance.ts
index 568282f..e483e13 100644
--- a/src/components/bc-balance.ts
+++ b/src/components/bc-balance.ts
@@ -49,6 +49,9 @@ export class Balance extends withTwind()(BitcoinConnectElement) {
       class="font-medium font-sans mr-2 flex justify-center items-center gap-0.5 ${classes[
         'text-brand-mixed'
       ]}"
+      role="status"
+      aria-live="${this._loading ? 'polite' : 'off'}"
+      aria-busy="${this._loading ? 'true' : 'false'}"
     >
       <span class="font-mono">${this._balance || 'Loading...'} </span></span
     >`;
@@ -109,6 +112,8 @@ export class Balance extends withTwind()(BitcoinConnectElement) {
         this._balance = '⚠️';
         // FIXME: better error handling
         console.error(error);
+      } finally {
+        this._loading = false;
       }
     })();
   }
diff --git a/src/components/bc-button.ts b/src/components/bc-button.ts
index 6c654e3..c9e3e6f 100644
--- a/src/components/bc-button.ts
+++ b/src/components/bc-button.ts
@@ -42,6 +42,9 @@ export class Button extends withTwind()(BitcoinConnectElement) {
       <div
         class="relative inline-flex ${classes.interactive} cursor-pointer 
           rounded-lg gap-2 justify-center items-center"
+        aria-pressed="${this._connected ? 'true' : 'false'}"
+        aria-busy="${isLoading ? 'true' : 'false'}"
+        aria-label="${isLoading ? 'Connecting...' : this.title}"
         @click=${this._onClick}
       >
         <div
diff --git a/src/components/bc-currency-switcher.ts b/src/components/bc-currency-switcher.ts
index ae37065..a95abcd 100644
--- a/src/components/bc-currency-switcher.ts
+++ b/src/components/bc-currency-switcher.ts
@@ -62,7 +62,11 @@ export class CurrencySwitcher extends withTwind()(BitcoinConnectElement) {
       return html`<div class="flex justify-center items-center gap-2">
         <div
           class="${classes.interactive}"
+          role="button"
+          tabindex="0"
+          aria-label="Open currency selection"
           @click=${this._showSelectVisibility}
+          @keydown=${this._handleKeydown}
         >
           <slot></slot>
         </div>
@@ -81,7 +85,12 @@ 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"
+            role="option"
+            aria-selected="${selectedCurrency === currency.value}"
+            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 +109,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
index 81c6167..1f8c95f 100644
--- a/src/components/bc-modal-header.ts
+++ b/src/components/bc-modal-header.ts
@@ -24,6 +24,8 @@ export class ModalHeader extends withTwind()(BitcoinConnectElement) {
   override render() {
     return html`<div
       class="flex justify-center items-center gap-2 w-full relative"
+      role="heading"
+      aria-level="1"
     >
       <div
         class="absolute right-0 h-full flex items-center justify-center gap-2"
@@ -31,7 +33,11 @@ export class ModalHeader extends withTwind()(BitcoinConnectElement) {
         ${this.showHelp
           ? html`<div
               class="${classes.interactive} ${classes['text-neutral-tertiary']}"
+              role="button"
+              tabindex="0"
+              aria-label="Help"
               @click=${() => store.getState().pushRoute('/help')}
+              @keydown=${this._handleKeydownHelp}
             >
               ${helpIcon}
             </div>`
@@ -39,7 +45,11 @@ export class ModalHeader extends withTwind()(BitcoinConnectElement) {
         ${this.closable
           ? html`<div
               class="${classes.interactive} ${classes['text-neutral-tertiary']}"
+              role="button"
+              tabindex="0"
+              aria-label="Close"
               @click=${this._handleClose}
+              @keydown=${this._handleKeydownClose}
             >
               ${crossIcon}
             </div>`
@@ -54,6 +64,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
index 2b08287..64c9b61 100644
--- a/src/components/bc-modal.ts
+++ b/src/components/bc-modal.ts
@@ -11,18 +11,26 @@ import {closeModal} from '../api';
 @customElement('bc-modal')
 export class Modal extends withTwind()(BitcoinConnectElement) {
   override render() {
-    return html` <div
+    return html`<div
       class="fixed top-0 left-0 w-full h-full flex justify-center items-end sm:items-center z-[21000]"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="modal-header"
+      aria-describedby="modal-content"
     >
       <div
         class="absolute top-0 left-0 w-full h-full -z-10 ${classes[
           'bg-foreground'
         ]} animate-darken"
         @click=${this._handleClose}
+        role="button"
+        tabindex="0"
+        aria-label="Close modal"
       ></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
         animate-fade-in"
+        id="modal-content"
       >
         <slot @onclose=${this._handleClose}></slot>
       </div>
@@ -32,6 +40,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
index c42c3a5..2900ef1 100644
--- a/src/components/bc-navbar.ts
+++ b/src/components/bc-navbar.ts
@@ -12,27 +12,44 @@ export class Navbar extends withTwind()(BitcoinConnectElement) {
   heading?: string;
 
   override render() {
-    return html`<div
+    return html`<nav
       class="flex justify-center items-center gap-2 w-full relative pb-4"
+      role="navigation"
+      aria-label="${this.heading ? this.heading + ' navigation' : 'navigation'}"
     >
       <div class="absolute left-8 h-full flex items-center justify-center">
         <div
           class="${classes.interactive} ${classes['text-neutral-tertiary']}"
+          role="button"
+          tabindex="0"
+          aria-label="Go back"
           @click=${this._goBack}
+          @keydown=${this._handleKeydown}
         >
           ${backIcon}
         </div>
       </div>
-      <div class="font-sans font-medium ${classes['text-neutral-secondary']}">
+      <div
+        class="font-sans font-medium ${classes['text-neutral-secondary']}"
+        role="heading"
+        aria-level="1"
+      >
         ${this.heading}
       </div>
-    </div>`;
+    </nav>`;
   }
 
   private _goBack = () => {
     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-pay-button.ts b/src/components/bc-pay-button.ts
index b6f4e49..726fcc7 100644
--- a/src/components/bc-pay-button.ts
+++ b/src/components/bc-pay-button.ts
@@ -64,7 +64,16 @@ export class PayButton extends withTwind()(BitcoinConnectElement) {
   override render() {
     const isLoading = this._waitingForInvoice || this._modalOpen;
 
-    return html` <div class="inline-flex" @click=${this._onClick}>
+    return html`<div
+      class="inline-flex"
+	      aria-live="polite"
+      aria-label="${isLoading
+        ? 'Loading payment'
+        : this._paid
+			? 'Payment complete'
+			: this.title}"	
+      @click=${this._onClick}
+    >
       <bci-button variant="primary">
         ${isLoading
           ? html`${waitingIcon(`w-11 h-11 -mr-2 -ml-2.5 `)}`
diff --git a/src/components/bc-router-outlet.ts b/src/components/bc-router-outlet.ts
index 1d53d0d..00e03e1 100644
--- a/src/components/bc-router-outlet.ts
+++ b/src/components/bc-router-outlet.ts
@@ -8,7 +8,9 @@ import {routes} from './routes';
 export class RouterOutlet extends withTwind()(BitcoinConnectElement) {
   override render() {
     //TODO: r = routes[this._route](this._routeParams);
-    return html`<div class="flex flex-col w-full">${routes[this._route]}</div>`;
+    return html`<div class="flex flex-col w-full" aria-live="polite">
+      ${routes[this._route]}
+    </div>`;
   }
 }
 
diff --git a/src/components/bc-start.ts b/src/components/bc-start.ts
index 4a0e6f0..81767aa 100644
--- a/src/components/bc-start.ts
+++ b/src/components/bc-start.ts
@@ -33,6 +33,11 @@ export class Start extends withTwind()(BitcoinConnectElement) {
   override render() {
     return html`<div
       class="flex flex-col justify-center items-center w-full font-sans"
+      aria-live="polite"
+      role="region"
+      aria-label="${this._connected
+        ? 'Connected Wallet Section'
+        : 'Connect Wallet Section'}"
     >
       ${this._connected
         ? html`
@@ -46,7 +51,7 @@ export class Start extends withTwind()(BitcoinConnectElement) {
                   <bc-currency-switcher>
                     <bc-balance class="text-2xl"></bc-balance>
                   </bc-currency-switcher>`
-              : html` <span
+              : html`<span
                   class="text-lg font-medium mt-4 -mb-4 ${classes[
                     'text-neutral-secondary'
                   ]}"
@@ -59,21 +64,31 @@ export class Start extends withTwind()(BitcoinConnectElement) {
               class="my-8 ${classes[
                 'text-neutral-primary'
               ]} w-64 max-w-full text-center"
+              role="heading"
+              aria-level="1"
             >
               How would you like to
               connect${this._appName ? `\nto ${this._appName}` : ''}?
             </h1>
 
             <bc-connector-list></bc-connector-list>
-
-            <div class="flex flex-col items-center w-full font-sans text-sm">
-              <h1 class="mt-8 ${classes['text-neutral-primary']} text-center">
+            
+			<div class="flex flex-col items-center w-full font-sans text-sm">
+              <h1
+                class="mt-8 ${classes['text-neutral-primary']} text-center"
+                role="heading"
+                aria-level="2"
+              >
                 Don't have a bitcoin lightning wallet?
                 <a
                   class="no-underline font-bold ${classes.interactive} ${classes[
                     'text-brand-mixed'
-                  ]} "
+                  ]}"
                   @click=${() => store.getState().pushRoute('/new-wallet')}
+				  @keydown=${() => store.getState().pushRoute('/new-wallet')}
+                  role="link"
+                  tabindex="0"
+                  aria-label="Get a bitcoin lightning wallet"
                   >Get one here</a
                 >
               </h1>
diff --git a/src/components/connectors/ConnectorElement.ts b/src/components/connectors/ConnectorElement.ts
index 5ea0830..453087f 100644
--- a/src/components/connectors/ConnectorElement.ts
+++ b/src/components/connectors/ConnectorElement.ts
@@ -30,7 +30,13 @@ 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}"
+      role="button"
+      tabindex="0"
       @click=${this._onClick}
+      @keydown=${this._handleKeydown}
+      aria-label="Connect to ${this._title}"
+      aria-pressed="${this._connected ? 'true' : 'false'}"
+      aria-busy="${this._connecting ? 'true' : 'false'}"
     >
       <div
         class="w-16 h-16 drop-shadow rounded-2xl flex justify-center items-center overflow-hidden"
@@ -48,6 +54,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/flows/bc-connect.ts b/src/components/flows/bc-connect.ts
index 56ca538..5947a85 100644
--- a/src/components/flows/bc-connect.ts
+++ b/src/components/flows/bc-connect.ts
@@ -29,8 +29,19 @@ export class ConnectFlow extends withTwind()(BitcoinConnectElement) {
   closable?: boolean;
 
   override render() {
-    return html`<div class="w-full flex-col justify-center items-center">
-      <bc-modal-header class="flex w-full" show-help ?closable=${this.closable}>
+    return html`<div
+      class="w-full flex-col justify-center items-center"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="connect-modal-header"
+      aria-describedby="${this._error ? 'connect-error-message' : ''}"
+    >
+      <bc-modal-header
+        id="connect-modal-header"
+        class="flex w-full"
+        show-help
+        ?closable=${this.closable}
+      >
         <div class="${classes['text-brand-mixed']} mr-[2px]">
           ${bcCircleIcon}
         </div>
@@ -39,10 +50,14 @@ export class ConnectFlow extends withTwind()(BitcoinConnectElement) {
       <div class="flex w-full pt-8">
         ${this._connecting
           ? html`<bci-connecting class="flex w-full"></bci-connecting>`
-          : html` <bc-router-outlet class="flex w-full"></bc-router-outlet>`}
+          : html`<bc-router-outlet class="flex w-full"></bc-router-outlet>`}
       </div>
       ${this._error
-        ? html`<p class="mt-4 text-center font-sans text-red-500">
+        ? html`<p
+            id="connect-error-message"
+            class="mt-4 text-center font-sans text-red-500"
+            aria-live="assertive"
+          >
             ${this._error}
           </p>`
         : null}
diff --git a/src/components/flows/bc-payment.ts b/src/components/flows/bc-payment.ts
index 0be8dc7..d03ef8b 100644
--- a/src/components/flows/bc-payment.ts
+++ b/src/components/flows/bc-payment.ts
@@ -9,6 +9,7 @@ import '../bc-router-outlet';
 import {classes} from '../css/classes';
 import store from '../../state/store';
 import {PaymentMethods} from '../../types/PaymentMethods';
+import './bc-connect';
 
 @customElement('bc-payment')
 export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
@@ -66,9 +67,26 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
 
   override render() {
     return this._showConnect && !this.paid
-      ? html` <bc-connect closable=${true}></bc-connect>`
-      : html`<div class="w-full flex-col justify-center items-center">
-          <bc-modal-header class="flex w-full" ?closable=${this.closable}>
+      ? html`
+          <bc-connect
+            ?closable=${true}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="payment-connect-modal-header"
+          ></bc-connect>
+        `
+      : html`<div
+          class="w-full flex-col justify-center items-center"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="payment-modal-header"
+          aria-describedby="${this._error ? 'payment-error-message' : ''}"
+        >
+          <bc-modal-header
+            id="payment-modal-header"
+            class="flex w-full"
+            ?closable=${this.closable}
+          >
             <p
               class="font-sans font-medium ${classes['text-neutral-secondary']}"
             >
@@ -84,7 +102,11 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
             ></bc-send-payment>
           </div>
           ${this._error
-            ? html`<p class="mt-4 text-center font-sans text-red-500">
+            ? html`<p
+                id="payment-error-message"
+                class="mt-4 text-center font-sans text-red-500"
+                aria-live="assertive"
+              >
                 ${this._error}
               </p>`
             : null}
diff --git a/src/components/internal/InternalElement.ts b/src/components/internal/InternalElement.ts
index 1b8e728..7d6f689 100644
--- a/src/components/internal/InternalElement.ts
+++ b/src/components/internal/InternalElement.ts
@@ -1,6 +1,7 @@
 import {LitElement, PropertyValues, css} from 'lit';
 
 export class InternalElement extends LitElement {
+ 
   static override styles = [
     css`
       :host {
@@ -22,6 +23,15 @@ export class InternalElement extends LitElement {
 
   protected override updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
+
+
+    if (this.ariaLabel) {
+      this.setAttribute('aria-label', this.ariaLabel);
+    }
+    if (this.ariaPressed !== null) {
+      this.setAttribute('aria-pressed', this.ariaPressed.toString());
+    }
+
     // hack to enable manual dark mode:
     // if a dark class is set on the document, pass it to the direct children of this shadow root
     // also requires `darkMode: "class"` to be set in twind config
@@ -37,7 +47,7 @@ export class InternalElement extends LitElement {
       }
     }
   }
-
+  
   // TODO: move, only needed by the button?
   protected _getBrandColorLuminance() {
     if (!globalThis.window) {
diff --git a/src/components/internal/bci-button.ts b/src/components/internal/bci-button.ts
index e1cd7d4..a692277 100644
--- a/src/components/internal/bci-button.ts
+++ b/src/components/internal/bci-button.ts
@@ -24,6 +24,21 @@ export class Button extends withTwind()(InternalElement) {
   })
   block = false;
 
+  @property({
+    type: Boolean,
+  })
+  pressed = false;
+
+  @property({
+    type: Boolean,
+  })
+  loading = false;
+
+  @property({
+    type: Number,
+  })
+  override tabIndex = 0;
+
   override render() {
     const isDarkMode =
       window.matchMedia &&
@@ -57,6 +72,12 @@ export class Button extends withTwind()(InternalElement) {
         ? `${classes['text-brand-mixed']}`
         : `${classes['text-neutral-tertiary']}`}
         "
+      aria-pressed="${this.pressed ? 'true' : 'false'}"
+      aria-busy="${this.loading ? 'true' : 'false'}"
+      aria-live="polite"
+      ?disabled="${this.loading}"
+      ?autofocus="${this.variant === 'primary'}"
+      tabindex="${this.tabIndex}"
     >
       ${this.ghost
         ? null
diff --git a/src/components/internal/bci-connecting.ts b/src/components/internal/bci-connecting.ts
index 0fba061..95865b9 100644
--- a/src/components/internal/bci-connecting.ts
+++ b/src/components/internal/bci-connecting.ts
@@ -10,6 +10,9 @@ export class Connecting extends withTwind()(InternalElement) {
   override render() {
     return html`<div
       class="${classes['text-foreground']} w-full flex-1 animate-pulse"
+      aria-live="polite"
+      aria-busy="true"
+      role="status"
     >
       <h1
         class="w-1/2 h-7 mx-auto bg-gray-200 dark:bg-gray-700 rounded-md"
@@ -27,6 +30,9 @@ export class Connecting extends withTwind()(InternalElement) {
       <div
         class="h-10 w-1/2 mx-auto bg-gray-200 dark:bg-gray-700 rounded-md"
       ></div>
+
+      <!-- Visually hidden but announced to screen readers -->
+      <div class="sr-only" aria-hidden="false">Connecting, please wait...</div>
     </div>`;
   }
 }
diff --git a/src/components/pages/bc-help.ts b/src/components/pages/bc-help.ts
index 1d8bc79..e792a86 100644
--- 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-lnbits.ts b/src/components/pages/bc-lnbits.ts
index 7df8190..5a85b51 100644
--- a/src/components/pages/bc-lnbits.ts
+++ b/src/components/pages/bc-lnbits.ts
@@ -38,9 +38,11 @@ export class lnbitsPage extends withTwind()(BitcoinConnectElement) {
             class="w-full mb-8 rounded-lg p-2 border-1 ${classes[
               'border-neutral-secondary'
             ]}"
+            aria-label="LNbits Admin Key"
+            aria-required="true"
           />
           <div class="mb-1 ${classes['text-neutral-secondary']}">
-            LNbits URL
+            <label for="lnbits-url">LNbits URL</label>
           </div>
 
           <input
@@ -50,8 +52,13 @@ export class lnbitsPage extends withTwind()(BitcoinConnectElement) {
             class="w-full mb-8 rounded-lg p-2 border-1 ${classes[
               'border-neutral-secondary'
             ]}"
+            aria-label="LNbits URL"
+            aria-required="true"
           />
-          <bci-button @click=${this.onConnect}>
+          <bci-button	
+            @click=${this.onConnect}
+            aria-label="Connect LNbits Wallet"
+          >
             <span class="${classes['text-brand-mixed']}">Connect</span>
           </bci-button>
         </div>
diff --git a/src/components/pages/bc-lnfi.ts b/src/components/pages/bc-lnfi.ts
index 6928c66..20ef6e2 100644
--- a/src/components/pages/bc-lnfi.ts
+++ b/src/components/pages/bc-lnfi.ts
@@ -44,7 +44,10 @@ export class LnfiNWCPage extends withTwind()(BitcoinConnectElement) {
               'border-neutral-secondary'
             ]}"
           />
-          <bci-button @click=${this.onConnect}>
+          <bci-button
+            @click=${this.onConnect}
+            aria-label="Connect LNbits Wallet"
+          >
             <span class="${classes['text-brand-mixed']}">Connect</span>
           </bci-button>
         </div>
diff --git a/src/components/pages/bc-send-payment.ts b/src/components/pages/bc-send-payment.ts
index e69d479..f50e887 100644
--- a/src/components/pages/bc-send-payment.ts
+++ b/src/components/pages/bc-send-payment.ts
@@ -63,15 +63,21 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
   private renderHeading(decodedInvoice: Invoice) {
     return html`
-      <h2 class="text-2xl mb-6 ${classes['text-neutral-secondary']}">
+      <h2
+        class="text-2xl mb-6 ${classes['text-neutral-secondary']}"
+        role="heading"
+        aria-level="1"
+      >
         <span
           class="font-bold font-mono text-4xl align-bottom ${classes[
             'text-brand-mixed'
           ]}"
-          >${decodedInvoice.satoshi.toLocaleString(undefined, {
+        >
+          ${decodedInvoice.satoshi.toLocaleString(undefined, {
             useGrouping: true,
-          })}</span
-        >&nbsp;sats
+          })}
+        </span>
+        &nbsp;sats
       </h2>
     `;
   }
@@ -82,6 +88,8 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
         class="flex flex-col justify-center items-center ${classes[
           'text-brand-mixed'
         ]}"
+        role="alert"
+        aria-live="assertive"
       >
         <p class="font-bold">Paid!</p>
         ${successAnimation}
@@ -91,7 +99,11 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
   private renderPayingState() {
     return html`
-      <div class="flex flex-col justify-center items-center">
+      <div
+        class="flex flex-col justify-center items-center"
+        role="alert"
+        aria-live="assertive"
+      >
         <p class="${classes['text-neutral-secondary']} mb-5">Paying...</p>
         ${waitingIcon(`w-48 h-48 ${classes['text-brand-mixed']}`)}
       </div>
@@ -100,7 +112,11 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
   private renderPaymentConfirmation() {
     return html`
-      <bci-button variant="primary" @click=${this._payInvoice}>
+      <bci-button
+        variant="primary"
+        @click=${this._payInvoice}
+        aria-label="Confirm payment"
+      >
         <span class="-ml-0.5">${bcIcon}</span>
         Confirm Payment
       </bci-button>
@@ -110,7 +126,11 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
   private renderWaitingForPayment() {
     return html`
-      <div class="flex justify-center items-center">
+      <div
+        class="flex justify-center items-center"
+        aria-live="polite"
+        role="alert"
+      >
         ${waitingIcon(`w-7 h-7 ${classes['text-brand-mixed']}`)}
         <p class="${classes['text-neutral-secondary']}">Waiting for payment</p>
       </div>
@@ -124,7 +144,11 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
     if (this.paymentMethods === 'all' || this.paymentMethods === 'internal') {
       internalMethods = html`
-        <bci-button block @click=${this._onClickConnectWallet}>
+        <bci-button
+          block
+          @click=${this._onClickConnectWallet}
+          aria-label="Connect wallet to pay"
+        >
           <span class="-ml-0.5">${bcIcon}</span>Connect Wallet
         </bci-button>
       `;
@@ -132,7 +156,11 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
     if (this.paymentMethods === 'all' || this.paymentMethods === 'external') {
       externalMethods = html`
-        <bci-button block @click=${this._copyAndDisplayInvoice}>
+        <bci-button
+          block
+          @click=${this._copyAndDisplayInvoice}
+          aria-label="Copy and display invoice"
+        >
           ${qrIcon} Copy & Display Invoice
         </bci-button>
       `;
@@ -145,8 +173,11 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
     return html`
       <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>
+          ? html`<a
+              href="lightning:${this.invoice}"
+              aria-label="Open in a Bitcoin wallet"
+            >
+              <bci-button variant="primary" block tabindex="-1">
                 ${walletIcon} Open in a Bitcoin Wallet
               </bci-button>
             </a>`
@@ -162,7 +193,11 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
     if (this.paymentMethods === 'all' || this.paymentMethods === 'internal') {
       internalMethods = html`
         <div class="${this.paymentMethods !== 'internal' ? 'mt-8' : ''}">
-          <bci-button variant="primary" @click=${this._onClickConnectWallet}>
+          <bci-button
+            variant="primary"
+            @click=${this._onClickConnectWallet}
+            aria-label="Connect wallet to pay"
+          >
             <span class="-ml-0.5">${bcIcon}</span>
             Connect Wallet to Pay
           </bci-button>
@@ -226,17 +261,21 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
 
     return html`
       <!-- add margin only on dark mode because on dark mode the qr has a white border -->
-      <a href="lightning:${this.invoice}" class="dark:mt-2">
+      <a
+        href="lightning:${this.invoice}"
+        class="dark:mt-2"
+        aria-label="Pay invoice via QR"
+      >
         <canvas id="qr" class="rounded-lg"></canvas>
       </a>
       <a
         @click=${this._copyInvoice}
-        class="
-        flex gap-1
-        mt-4
-        ${classes[
+        @keydown=${this._copyInvoice}
+        tabindex="0"
+        class="flex gap-1 mt-4 ${classes[
           'text-brand-mixed'
         ]} ${classes.interactive} font-semibold text-xs"
+        aria-label="Copy invoice to clipboard"
       >
         ${this._hasCopiedInvoice ? copiedIcon : copyIcon}
         ${this._hasCopiedInvoice ? 'Copied!' : 'Copy Invoice'}