jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-1819 add screenreader text to improve accessibility.

Browse source
This commit is contained in:
Bryan Mauger 2023-11-28 15:04:54 -05:00
parent 8c3840ed9d
commit a0262ed974
1 changed files with 31 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/fmg-components/cart/cart.vue
View file

@ -5,7 +5,7 @@
class="row vin-toggle flex align-items-center pt-4"
:class="[isExpanded ? 'expanded' : '']"
@click="toggleIsExpanded()">
<a href="#!" class="col d-flex justify-content-between py-0">
<a aria-label="expand cart" href="#!" class="col d-flex justify-content-between py-0">
<span class="label">{{ amountDueText }}</span>
<span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
</a>
@ -13,7 +13,8 @@
<div class="price-table">
<div class="service-type">
<textBlock :cmsWidgetName="servicePackageTitleWidget" />
<span>
<span tabindex="0">
<span class="sr-only">{{screenReaderTotalAmountDueText}}</span>
{{ getFormattedAmount("", packagePrice) }}
</span>
</div>
@ -27,7 +28,11 @@
linkType="text"
:text="removeLinkText"
href="#!"
@click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
@click-event="removeItem(cartItem.cartItemType, cartItem.category)">
<template v-slot:after-text>
<span class="sr-only">{{ cartItem.name }}</span>
</template>
</textLink>
</div>
<!-- Nonpackaged Cart Items -->
@ -56,25 +61,25 @@
<span v-else-if="cartItem == recycleFeeCartItem">
{{ recycleFeeCartItem.name }}
</span>
<span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span>
<span tabindex="0"><span class="sr-only">{{screenReaderRecycleFeeText}}</span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span>
</div>
<!-- Sub total, sales tax, total columns -->
<div class="sub-total">
<span>{{ subtotalText }}</span
><span>{{ getFormattedAmount("", subTotal) }}</span>
><span tabindex="0"><span class="sr-only">{{screenReaderSubTotalText}}</span>{{ getFormattedAmount("", subTotal) }}</span>
</div>
<div class="sales-tax">
<span>{{ salesTaxText }}</span
><span>{{ getFormattedAmount("", salesTax) }}</span>
><span tabindex="0"><span class="sr-only">{{screenReaderSalesTaxText}}</span>{{ getFormattedAmount("", salesTax) }}</span>
</div>
<div v-if="showAsPaid" class="amount-paid">
<span>{{ amountPaidText }}</span
><span>{{ getFormattedAmount("", amountPaid) }}</span>
><span tabindex="0"><span class="sr-only">{{screenReaderAmountPaidText}}</span>{{ getFormattedAmount("", amountPaid) }}</span>
</div>
<div class="amount-due">
<span>{{ amountDueText }}</span
><span>{{ getFormattedAmount("", amountDue) }}</span>
><span tabindex="0"><span class="sr-only">{{screenReaderTotalAmountDueText}}</span>{{ getFormattedAmount("", amountDue) }}</span>
</div>
</div>
</div>
@ -187,6 +192,24 @@ export default {
},
},
computed: {
screenReaderTotalAmountDueText() {
return this.getCmsContent("ScreenReaderTotalAmountDueWidget", "Text");
},
screenReaderRemoveVapsText() {
return this.getCmsContent("ScreenReaderRemoveVapsWidget", "Text");
},
screenReaderRecycleFeeText() {
return this.getCmsContent("ScreenReaderRecycleFeeWidget", "Text");
},
screenReaderSubTotalText() {
return this.getCmsContent("ScreenReaderSubTotalWidget", "Text");
},
screenReaderAmountPaidText() {
return this.getCmsContent("ScreenReaderAmountPaidWidget", "Text");
},
screenReaderSalesTaxText() {
return this.getCmsContent("ScreenReaderSalesTaxWidget", "Text");
},
availableLineItems() {
if (!this.lineItems || this.lineItems.length < 1) {
return [];