Accessibilty additions

src/components/bc-currency-switcher.ts

@@ -59,10 +59,14 @@ export class CurrencySwitcher extends withTwind()(BitcoinConnectElement) {
 
   override render() {
     if (!this._isSwitchingCurrency) {
-      return html`<div class="flex justify-center items-center gap-2">
+		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
@@ -94,11 +103,39 @@ export class CurrencySwitcher extends withTwind()(BitcoinConnectElement) {
 
   private _showSelectVisibility() {
     this._isSwitchingCurrency = true;
+    // Focus the first currency option when switching is enabled
+    setTimeout(() => {
+      const firstCurrencyOption = this.shadowRoot?.querySelector(
+        '[role="option"]'
+      ) as HTMLElement;
+      firstCurrencyOption?.focus();
+    }, 0);
   }
 
   private _selectCurrency(selectedCurrency: string) {
     store.getState().setCurrency(selectedCurrency);
     this._isSwitchingCurrency = false;
+    // Ensure focus returns to the triggering button
+    const triggerButton = this.shadowRoot?.querySelector(
+      '[role="button"]'
+    ) as HTMLElement;
+    triggerButton?.focus();
+  }
+
+  // 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 override _handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this._showSelectVisibility();
+    }
   }
 }
 

src/components/bc-pay-button.ts

@@ -113,6 +113,7 @@ export class PayButton extends withTwind()(BitcoinConnectElement) {
     });
     this._setPaid = setPaid;
   }
+
 }
 
 declare global {

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>`;
   }
 }
 

src/components/bc-start.ts

@@ -33,11 +33,16 @@ 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`
             ${this._showBalance
-              ? html`<span
+              ? html` <span
                     class="text-xs font-medium mb-2 ${classes[
                       'text-neutral-secondary'
                     ]}"
@@ -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,28 @@ 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">
+              <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')}
+                  role="link"
+                  tabindex="0"
+                  aria-label="Get a bitcoin lightning wallet"
                   >Get one here</a
                 >
               </h1>