improve invoice pages for accessibility testing #5452
Conversation
| @@ -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"> | |||
There was a problem hiding this comment.
I'm not sure why these instances need an extra label, when the element content is just that text.
| @@ -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", | |||
There was a problem hiding this comment.
I wouldn't change those texts and say they are clear enough. Otherwise we'd have to adapt many more places.
| @@ -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> | |||
There was a problem hiding this comment.
How does defining the scope help here?
There was a problem hiding this comment.
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.
| @@ -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> | |||
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Noted. Would update.
|
This PR still being worked on? |
This is an improvement on some of the copy text to aid accessibility. #4986