Skip to content

Commit

Permalink
last (?) changes for Improve accessibility getAlby#182
Browse files Browse the repository at this point in the history
  • Loading branch information
@chebizarro
chebizarro committed Oct 30, 2024
1 parent 6b59ea6 commit 0d76c39
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 34 deletions.
23 changes: 19 additions & 4 deletions src/components/flows/bc-connect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,19 @@ export class ConnectFlow extends withTwind()(BitcoinConnectElement) {
closable?: boolean;

override render() {
return html`<div class="w-full flex-col justify-center items-center">
<bc-modal-header class="flex w-full" show-help ?closable=${this.closable}>
return html`<div
class="w-full flex-col justify-center items-center"
role="dialog"
aria-modal="true"
aria-labelledby="connect-modal-header"
aria-describedby="${this._error ? 'connect-error-message' : ''}"
>
<bc-modal-header
id="connect-modal-header"
class="flex w-full"
show-help
?closable=${this.closable}
>
<div class="${classes['text-brand-mixed']} mr-[2px]">
${bcCircleIcon}
</div>
Expand All @@ -39,10 +50,14 @@ export class ConnectFlow extends withTwind()(BitcoinConnectElement) {
<div class="flex w-full pt-8">
${this._connecting
? html`<bci-connecting class="flex w-full"></bci-connecting>`
: html` <bc-router-outlet class="flex w-full"></bc-router-outlet>`}
: html`<bc-router-outlet class="flex w-full"></bc-router-outlet>`}
</div>
${this._error
? html`<p class="mt-4 text-center font-sans text-red-500">
? html`<p
id="connect-error-message"
class="mt-4 text-center font-sans text-red-500"
aria-live="assertive"
>
${this._error}
</p>`
: null}
Expand Down
35 changes: 31 additions & 4 deletions src/components/flows/bc-payment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,36 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {

override render() {
return this._showConnect && !this.paid
? html` <bc-connect closable=${true}></bc-connect>`
: html`<div class="w-full flex-col justify-center items-center">
<bc-modal-header class="flex w-full" ?closable=${this.closable}>
? html`
<!-- Render the connect component -->
<bc-connect
closable=${true}
role="dialog"
aria-modal="true"
aria-labelledby="payment-connect-modal-header"
></bc-connect>
`
: html`<div
class="w-full flex-col justify-center items-center"
role="dialog"
aria-modal="true"
aria-labelledby="payment-modal-header"
aria-describedby="${this._error ? 'payment-error-message' : ''}"
>
<!-- Modal header -->
<bc-modal-header
id="payment-modal-header"
class="flex w-full"
?closable=${this.closable}
>
<p
class="font-sans font-medium ${classes['text-neutral-secondary']}"
>
Payment Request
</p>
</bc-modal-header>
<!-- Payment Section -->
<div class="flex flex-col justify-center items-center w-full pt-8">
<bc-send-payment
.invoice=${this.invoice}
Expand All @@ -83,8 +104,14 @@ export class SendPaymentFlow extends withTwind()(BitcoinConnectElement) {
@onclickconnectwallet=${this._onClickConnectWallet}
></bc-send-payment>
</div>
<!-- Error message -->
${this._error
? html`<p class="mt-4 text-center font-sans text-red-500">
? html`<p
id="payment-error-message"
class="mt-4 text-center font-sans text-red-500"
aria-live="assertive"
>
${this._error}
</p>`
: null}
Expand Down
52 changes: 26 additions & 26 deletions src/components/pages/bc-send-payment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,25 +63,29 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {

private renderHeading(decodedInvoice: Invoice) {
return html`
<h2 class="text-2xl mb-6 ${classes['text-neutral-secondary']}">
<h2
class="text-2xl mb-6 ${classes['text-neutral-secondary']}"
role="heading"
aria-level="1"
>
<span
class="font-bold font-mono text-4xl align-bottom ${classes[
'text-brand-mixed'
]}"
>${decodedInvoice.satoshi.toLocaleString(undefined, {
class="font-bold font-mono text-4xl align-bottom ${classes['text-brand-mixed']}"
>
${decodedInvoice.satoshi.toLocaleString(undefined, {
useGrouping: true,
})}</span
>&nbsp;sats
})}
</span>
&nbsp;sats
</h2>
`;
}

private renderPaidState() {
return html`
<div
class="flex flex-col justify-center items-center ${classes[
'text-brand-mixed'
]}"
class="flex flex-col justify-center items-center ${classes['text-brand-mixed']}"
role="alert"
aria-live="assertive"
>
<p class="font-bold">Paid!</p>
${successAnimation}
Expand All @@ -91,7 +95,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {

private renderPayingState() {
return html`
<div class="flex flex-col justify-center items-center">
<div class="flex flex-col justify-center items-center" role="alert" aria-live="assertive">
<p class="${classes['text-neutral-secondary']} mb-5">Paying...</p>
${waitingIcon(`w-48 h-48 ${classes['text-brand-mixed']}`)}
</div>
Expand All @@ -100,7 +104,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {

private renderPaymentConfirmation() {
return html`
<bci-button variant="primary" @click=${this._payInvoice}>
<bci-button variant="primary" @click=${this._payInvoice} aria-label="Confirm payment">
<span class="-ml-0.5">${bcIcon}</span>
Confirm Payment
</bci-button>
Expand All @@ -110,7 +114,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {

private renderWaitingForPayment() {
return html`
<div class="flex justify-center items-center">
<div class="flex justify-center items-center" aria-live="polite" role="alert">
${waitingIcon(`w-7 h-7 ${classes['text-brand-mixed']}`)}
<p class="${classes['text-neutral-secondary']}">Waiting for payment</p>
</div>
Expand All @@ -124,15 +128,15 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {

if (this.paymentMethods === 'all' || this.paymentMethods === 'internal') {
internalMethods = html`
<bci-button block @click=${this._onClickConnectWallet}>
<bci-button block @click=${this._onClickConnectWallet} aria-label="Connect wallet to pay">
<span class="-ml-0.5">${bcIcon}</span>Connect Wallet
</bci-button>
`;
}

if (this.paymentMethods === 'all' || this.paymentMethods === 'external') {
externalMethods = html`
<bci-button block @click=${this._copyAndDisplayInvoice}>
<bci-button block @click=${this._copyAndDisplayInvoice} aria-label="Copy and display invoice">
${qrIcon} Copy & Display Invoice
</bci-button>
`;
Expand All @@ -145,7 +149,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
return html`
<div class="mt-8 w-full flex flex-col gap-4">
${this.paymentMethods === 'all' || this.paymentMethods === 'external'
? html`<a href="lightning:${this.invoice}">
? html`<a href="lightning:${this.invoice}" aria-label="Open in a Bitcoin wallet">
<bci-button variant="primary" block>
${walletIcon} Open in a Bitcoin Wallet
</bci-button>
Expand All @@ -160,9 +164,9 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {
private renderConnectWalletDesktop() {
let internalMethods = null;
if (this.paymentMethods === 'all' || this.paymentMethods === 'internal') {
internalMethods = html`
internalMethods = html`
<div class="${this.paymentMethods !== 'internal' ? 'mt-8' : ''}">
<bci-button variant="primary" @click=${this._onClickConnectWallet}>
<bci-button variant="primary" @click=${this._onClickConnectWallet} aria-label="Connect wallet to pay">
<span class="-ml-0.5">${bcIcon}</span>
Connect Wallet to Pay
</bci-button>
Expand All @@ -177,7 +181,7 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {

let externalMethods = null;
if (this.paymentMethods === 'all' || this.paymentMethods === 'external') {
externalMethods = html`
externalMethods = html`
<div
class="flex flex-col items-center ${this.paymentMethods === 'external'
? 'mt-8'
Expand Down Expand Up @@ -226,17 +230,13 @@ export class SendPayment extends withTwind()(BitcoinConnectElement) {

return html`
<!-- add margin only on dark mode because on dark mode the qr has a white border -->
<a href="lightning:${this.invoice}" class="dark:mt-2">
<a href="lightning:${this.invoice}" class="dark:mt-2" aria-label="Pay invoice via QR">
<canvas id="qr" class="rounded-lg"></canvas>
</a>
<a
@click=${this._copyInvoice}
class="
flex gap-1
mt-4
${classes[
'text-brand-mixed'
]} ${classes.interactive} font-semibold text-xs"
class="flex gap-1 mt-4 ${classes['text-brand-mixed']} ${classes.interactive} font-semibold text-xs"
aria-label="Copy invoice to clipboard"
>
${this._hasCopiedInvoice ? copiedIcon : copyIcon}
${this._hasCopiedInvoice ? 'Copied!' : 'Copy Invoice'}
Expand Down

0 comments on commit 0d76c39

Please sign in to comment.