From 6dfa7abe813d2284dd99f7834da17ef74c33281f Mon Sep 17 00:00:00 2001
From: Chris Daley <chebizarro@gmail.com>
Date: Tue, 29 Oct 2024 23:56:13 -0700
Subject: [PATCH] adding aria options

---
 src/components/bc-button.ts                |  3 +++
 src/components/bc-pay-button.ts            | 11 ++++++++++-
 src/components/internal/InternalElement.ts | 16 ++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

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-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/internal/InternalElement.ts b/src/components/internal/InternalElement.ts
index 1b8e728..f8c1143 100644
--- a/src/components/internal/InternalElement.ts
+++ b/src/components/internal/InternalElement.ts
@@ -22,6 +22,22 @@ export class InternalElement extends LitElement {
 
   protected override updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
+
+    // Ensure focusability by adding tabindex if focusable is true
+    if (this.focusable) {
+      this.setAttribute('tabindex', '0');
+    } else {
+      this.removeAttribute('tabindex');
+    }
+
+
+    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