diff --git a/src/components/bc-currency-switcher.ts b/src/components/bc-currency-switcher.ts
index ae37065..53b4997 100644
--- a/src/components/bc-currency-switcher.ts
+++ b/src/components/bc-currency-switcher.ts
@@ -63,6 +63,7 @@ export class CurrencySwitcher extends withTwind()(BitcoinConnectElement) {
@@ -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)}
>
${currency.flag} store.getState().pushRoute('/help')}
+ @keydown=${this._handleKeydownHelp}
>
${helpIcon}
`
@@ -39,7 +41,9 @@ export class ModalHeader extends withTwind()(BitcoinConnectElement) {
${this.closable
? html`
${crossIcon}
`
@@ -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
index 2b08287..42c650a 100644
--- 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`
${backIcon}
@@ -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
index 4a0e6f0..8ada1e5 100644
--- a/src/components/bc-start.ts
+++ b/src/components/bc-start.ts
@@ -74,6 +74,8 @@ export class Start extends withTwind()(BitcoinConnectElement) {
'text-brand-mixed'
]} "
@click=${() => store.getState().pushRoute('/new-wallet')}
+ @keydown=${this._handleKeydown}
+ tabindex="0"
>Get one here
@@ -81,6 +83,13 @@ export class Start extends withTwind()(BitcoinConnectElement) {
`}
`;
}
+
+ 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
index 5ea0830..4cf91d0 100644
--- 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`
`;
}
+ // 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
) {
diff --git a/src/components/internal/bci-button.ts b/src/components/internal/bci-button.ts
index e1cd7d4..e64e974 100644
--- 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
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"
>
-
+
Learn more
${linkIcon}
@@ -50,7 +50,7 @@ export class HelpPage extends withTwind()(BitcoinConnectElement) {
target="_blank"
class="${classes['hover-animation']} flex-1"
>
-
+
Use it
${linkIcon}
diff --git a/src/components/pages/bc-send-payment.ts b/src/components/pages/bc-send-payment.ts
index e69d479..82c8ff4 100644
--- 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) {
${this.paymentMethods === 'all' || this.paymentMethods === 'external'
? html`
-
+
${walletIcon} Open in a Bitcoin Wallet
`
@@ -231,6 +231,8 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {