From 11732c593ddf6dff14c5e344a929ed004f6618d7 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Mon, 28 Oct 2024 12:54:46 +0100 Subject: [PATCH 1/4] feat(a11y): improve My Account payment-details/address-book components a11y readability support --- .../profile/components/address-book/address-book.component.ts | 2 +- .../myaccount/payment-methods/payment-methods.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/feature-libs/user/profile/components/address-book/address-book.component.ts b/feature-libs/user/profile/components/address-book/address-book.component.ts index 9a92d5873d3..bb63663ff2d 100644 --- a/feature-libs/user/profile/components/address-book/address-book.component.ts +++ b/feature-libs/user/profile/components/address-book/address-book.component.ts @@ -109,7 +109,7 @@ export class AddressBookComponent implements OnInit { const numbers = getAddressNumbers(address, textPhone, textMobile); return { - role: 'region', + role: 'article', textBold: address.firstName + ' ' + address.lastName, text: [ address.line1, diff --git a/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts b/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts index efe9086b54c..a64b6a5073b 100644 --- a/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts +++ b/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts @@ -83,7 +83,7 @@ export class PaymentMethodsComponent implements OnInit { } actions.push({ name: textDelete, event: 'edit' }); const card: Card = { - role: 'region', + role: 'article', header: defaultPayment ? textDefaultPaymentMethod : undefined, textBold: accountHolderName, text: [cardNumber ?? '', textExpires], From d89ab26ea30bed1d299ccb1123d393680417b1af Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 31 Oct 2024 14:40:01 +0100 Subject: [PATCH 2/4] fix: address PR comments - verbalize entire card content --- .../profile/components/address-book/address-book.component.ts | 2 +- .../myaccount/payment-methods/payment-methods.component.ts | 2 +- .../storefrontlib/shared/components/card/card.component.html | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/feature-libs/user/profile/components/address-book/address-book.component.ts b/feature-libs/user/profile/components/address-book/address-book.component.ts index bb63663ff2d..5b681414fd5 100644 --- a/feature-libs/user/profile/components/address-book/address-book.component.ts +++ b/feature-libs/user/profile/components/address-book/address-book.component.ts @@ -109,7 +109,7 @@ export class AddressBookComponent implements OnInit { const numbers = getAddressNumbers(address, textPhone, textMobile); return { - role: 'article', + role: 'application', textBold: address.firstName + ' ' + address.lastName, text: [ address.line1, diff --git a/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts b/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts index a64b6a5073b..71662e9bf5d 100644 --- a/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts +++ b/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts @@ -83,7 +83,7 @@ export class PaymentMethodsComponent implements OnInit { } actions.push({ name: textDelete, event: 'edit' }); const card: Card = { - role: 'article', + role: 'application', header: defaultPayment ? textDefaultPaymentMethod : undefined, textBold: accountHolderName, text: [cardNumber ?? '', textExpires], diff --git a/projects/storefrontlib/shared/components/card/card.component.html b/projects/storefrontlib/shared/components/card/card.component.html index cfe8079c2f3..0d707670807 100644 --- a/projects/storefrontlib/shared/components/card/card.component.html +++ b/projects/storefrontlib/shared/components/card/card.component.html @@ -6,6 +6,7 @@ [attr.aria-label]=" content.label ? (content.label | cxTranslate: { number: this.index }) : null " + aria-describedby="cx-card-container" [class.cx-card-border]="border" [class.cx-card-fit-to-container]="fitToContainer" > @@ -28,7 +29,7 @@ {{ content.title }} -
+
From a57f52f25585b6dfdb36d2349b722e7548f4ddd1 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Thu, 31 Oct 2024 18:56:49 +0100 Subject: [PATCH 3/4] fix: address PR comments - verbalize entire card content on my account and checkout pages --- .../checkout-delivery-address.component.ts | 2 +- .../checkout-payment-method.component.ts | 2 +- .../storefrontlib/shared/components/card/card.component.html | 4 ++-- .../storefrontlib/shared/components/card/card.component.ts | 4 ++++ 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts index ceb05c41b1a..a4758bdc6a5 100644 --- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts +++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts @@ -119,7 +119,7 @@ export class CheckoutDeliveryAddressComponent implements OnInit { const isSelected: boolean = selected && selected.id === address.id; return { - role: 'region', + role: 'application', title: address.defaultAddress ? textDefaultDeliveryAddress : '', textBold: address.firstName + ' ' + address.lastName, text: [ diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts index 866decf0e04..34e1b661d86 100644 --- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts +++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts @@ -301,7 +301,7 @@ export class CheckoutPaymentMethodComponent implements OnInit, OnDestroy { const isSelected = selected?.id === paymentDetails.id; return { - role: 'region', + role: 'application', title: paymentDetails.defaultPayment ? cardLabels.textDefaultPaymentMethod : '', diff --git a/projects/storefrontlib/shared/components/card/card.component.html b/projects/storefrontlib/shared/components/card/card.component.html index 0d707670807..6398338d4d5 100644 --- a/projects/storefrontlib/shared/components/card/card.component.html +++ b/projects/storefrontlib/shared/components/card/card.component.html @@ -6,7 +6,7 @@ [attr.aria-label]=" content.label ? (content.label | cxTranslate: { number: this.index }) : null " - aria-describedby="cx-card-container" + [attr.aria-describedby]="ariaDescribedBy" [class.cx-card-border]="border" [class.cx-card-fit-to-container]="fitToContainer" > @@ -29,7 +29,7 @@ {{ content.title }} -
+
diff --git a/projects/storefrontlib/shared/components/card/card.component.ts b/projects/storefrontlib/shared/components/card/card.component.ts index 8c231324bfa..2ea1ed1169b 100644 --- a/projects/storefrontlib/shared/components/card/card.component.ts +++ b/projects/storefrontlib/shared/components/card/card.component.ts @@ -126,4 +126,8 @@ export class CardComponent implements OnInit { ngOnInit() { // Intentional empty method } + + protected get ariaDescribedBy() { + return `cx-card-container-${this.index}`; + } } From 63c6b0a3abfdeb89b0a67cb590a80425965ff1d9 Mon Sep 17 00:00:00 2001 From: Uros Lates Date: Mon, 4 Nov 2024 10:22:05 +0100 Subject: [PATCH 4/4] fix: failed uni-test --- .../checkout-payment-method.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts index 82ed2c11f85..9e87b169954 100644 --- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts +++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.spec.ts @@ -441,7 +441,7 @@ describe('CheckoutPaymentMethodComponent', () => { selectedPaymentMethod ) ).toEqual({ - role: 'region', + role: 'application', title: '✓ DEFAULT', textBold: 'Name', text: ['123456789', 'Expires'],