@@ -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)}
>
${currency.flag} {
+ 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();
+ }
}
}
diff --git a/src/components/bc-pay-button.ts b/src/components/bc-pay-button.ts
index 726fcc7..3de56af 100644
--- a/src/components/bc-pay-button.ts
+++ b/src/components/bc-pay-button.ts
@@ -113,6 +113,7 @@ export class PayButton extends withTwind()(BitcoinConnectElement) {
});
this._setPaid = setPaid;
}
+
}
declare global {
diff --git a/src/components/bc-router-outlet.ts b/src/components/bc-router-outlet.ts
index 1d53d0d..00e03e1 100644
--- a/src/components/bc-router-outlet.ts
+++ b/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`
${routes[this._route]}
`;
+ return html`
+ ${routes[this._route]}
+
`;
}
}
diff --git a/src/components/bc-start.ts b/src/components/bc-start.ts
index 4a0e6f0..479eaaa 100644
--- a/src/components/bc-start.ts
+++ b/src/components/bc-start.ts
@@ -33,11 +33,16 @@ export class Start extends withTwind()(BitcoinConnectElement) {
override render() {
return html`
${this._connected
? html`
${this._showBalance
- ? html`
`
- : html`
How would you like to
connect${this._appName ? `\nto ${this._appName}` : ''}?
-
-