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`
`; } + + 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) {