adding aria options

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

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

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