Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

improve invoice pages for accessibility testing #5452

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

improve invoice pages for accessibility testing #5452

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6cd157a
improve invoice pages for accessibility testing
TChukwuleta Nov 6, 2023
2c4e035
Accessibility tests update
TChukwuleta Nov 6, 2023
4085304
test case fix for accessibility test
TChukwuleta Nov 6, 2023
b143851
Accessibility testing update
TChukwuleta Nov 14, 2023
15093f5
Merge branch 'master' of https://github.com/TChukwuleta/btcpayserver …
TChukwuleta Nov 14, 2023
dec8208
.
TChukwuleta Dec 9, 2023
24e34da
change request for accessibility PR
TChukwuleta Dec 9, 2023
4506269
remove merge head conflict
TChukwuleta Dec 9, 2023
5e3f32c
remove conflicting tags
TChukwuleta Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@
@await Component.InvokeAsync("UiExtensionPoint", new {location = "checkout-v2-bitcoin-pre-content", model = Model})
<div class="payment-box">
<div v-if="model.invoiceBitcoinUrlQR" class="qr-container" :data-qr-value="model.invoiceBitcoinUrlQR" :data-clipboard="model.btcAddress">
<div>
<div role="img" aria-label="Bitcoin QR Code">
<qrcode :value="model.invoiceBitcoinUrlQR" tag="div" :options="qrOptions" />
</div>
<img class="qr-icon" :src="model.cryptoImage" :alt="model.paymentMethodName"/>
<img class="qr-icon" :src="model.cryptoImage" :alt="model.paymentMethodName" />
</div>

<div v-if="model.btcAddress" class="input-group mt-3">
<div class="form-floating" id="[email protected]">
<vc:truncate-center text="model.btcAddress" is-vue="true" padding="15" elastic="true" classes="form-control-plaintext" />
Expand Down
2 changes: 1 addition & 1 deletion BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@
</div>
</div>
<div class="buttons" v-if="srvModel.receiptLink || storeLink || isModal">
<a v-if="srvModel.receiptLink" class="btn btn-primary rounded-pill w-100" :href="srvModel.receiptLink" :target="isModal ? '_top' : null" v-t="'view_receipt'" id="ReceiptLink"></a>
<a v-if="srvModel.receiptLink" class="btn btn-primary rounded-pill w-100" :href="srvModel.receiptLink" :target="isModal ? '_top' : null" v-t="'view_receipt'" id="ReceiptLink" role="button" aria-label="View Receipt"></a>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here aria-label would need to be :aria-label="$t('view_receipt')" to have it translated as well, but I'm not sure if or why we have to repeat the element content here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noted. Would update.

<a v-if="storeLink" class="btn btn-secondary rounded-pill w-100" :href="storeLink" :target="isModal ? '_top' : null" v-html="$t('return_to_store', { storeName: srvModel.storeName })" id="StoreLink"></a>
<button v-else-if="isModal" class="btn btn-secondary rounded-pill w-100" v-on:click="close" v-t="'Close'"></button>
</div>
Expand Down
11 changes: 8 additions & 3 deletions BTCPayServer/Views/UIInvoice/Invoice.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,19 +211,24 @@
<h3 class="mb-3">General Information</h3>
<table class="table mb-0">
<tr>
<th>Store</th>
<th scope="row">Store</th>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does defining the scope help here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Generally, I know that defining scope makes it easier for screen readers to understand the relationship between the header and the subsequent data, thereby creating a more structure description when being read. Felt it can come in handy here since we are dealing with accessibility testing.

<td>
<a href="@Model.StoreLink" rel="noreferrer noopener">@Model.StoreName</a>
</td>
</tr>
@* <tr>
<th>Invoice Number</th>
<td>@Model.Id</td>
</tr> *@
<tr>
<th>Invoice Id</th>
<th scope="row">Invoice Id</th>
<td>@Model.Id</td>
</tr>

@if (!string.IsNullOrEmpty(Model.TypedMetadata.OrderId))
{
<tr>
<th>Order Id</th>
<th scope="row">Order Id</th>
<td>
@if (!string.IsNullOrEmpty(Model.TypedMetadata.OrderUrl))
{
Expand Down
6 changes: 4 additions & 2 deletions BTCPayServer/Views/UIInvoice/InvoiceReceipt.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,14 @@
{
if (Model.ReceiptOptions.ShowQR is true)
{
<vc:qr-code data="@Context.Request.GetCurrentUrl()"></vc:qr-code>
<div aria-label="QR Code" role="img">
<vc:qr-code data="@Context.Request.GetCurrentUrl()"></vc:qr-code>
</div>
}
<dl class="d-flex flex-column gap-4 mb-0 flex-fill">
<div class="d-flex flex-column">
<div class="d-flex align-items-center justify-content-between">
<a href="?print=true" class="btn btn-link p-0 d-print-none fw-semibold order-1" target="_blank">Print</a>
<a href="?print=true" class="btn btn-link p-0 d-print-none fw-semibold order-1" target="_blank">Print Receipt</a>
<dd class="text-muted mb-0 fw-semibold">Amount Paid</dd>
</div>
<dt class="fs-2 mb-0 text-nowrap fw-semibold">@DisplayFormatter.Currency(Model.Amount, Model.Currency, DisplayFormatter.CurrencyFormat.Symbol)</dt>
Expand Down
10 changes: 7 additions & 3 deletions BTCPayServer/Views/UIPullPayment/ViewPullPayment.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,13 +105,17 @@
<span class="text-nowrap">@Model.LastRefreshed.ToString("g")</span>
</div>
<div class="d-flex align-items-center only-for-js gap-3 my-3">
<button type="button" class="btn btn-link fw-semibold d-print-none p-0" id="copyLink">
<button type="button" class="btn btn-link fw-semibold d-print-none p-0" id="copyLink" aria-label="Copy Link">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure why these instances need an extra label, when the element content is just that text.

Copy Link
</button>
<button type="button" class="btn btn-link fw-semibold d-print-none p-0" page-qr>
<span class="fa fa-qrcode"></span> Show QR
<button type="button" class="btn btn-link fw-semibold d-print-none p-0" page-qr aria-label="Show QR Code">
<span class="fa fa-qrcode" aria-hidden="true"></span>
<span class="visually-hidden">Show QR Code</span>
</button>
</div>



@if (!string.IsNullOrEmpty(Model.ResetIn))
{
<p>
Expand Down
2 changes: 1 addition & 1 deletion BTCPayServer/wwwroot/locales/checkout/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"payment_received": "Payment Received",
"payment_received_body": "Your payment has been received and is now processing.",
"payment_received_confirmations": "Once your payment has received {{requiredConfirmations}} confirmations on the {{cryptoCode}} blockchain, your invoice will be settled.",
"invoice_paid": "Invoice Paid",
"invoice_paid": "Invoice Paid Successfully",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't change those texts and say they are clear enough. Otherwise we'd have to adapt many more places.

"invoice_expired": "Invoice Expired",
"invoice_expired_body": "An invoice is only valid for {{minutes}} minutes.\n\nReturn to {{storeName}} if you would like to resubmit a payment.",
"invoice_paidpartial_body": "An invoice is only valid for {{minutes}} minutes.\n\nThis invoice expired with partial payment. Please contact us, so that we can fulfill your order.",
Expand Down