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

feat(a11y): add a11y selected label improvements to checkout Address/PaymentMethod components #19381

Draft
wants to merge 11 commits into
base: develop
Choose a base branch
from
Draft

feat(a11y): add a11y selected label improvements to checkout Address/PaymentMethod components #19381

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d730293
feat(a11y): add a11y selected label improvements to checkout Checkout…
ulates-sap Oct 10, 2024
84b25d4
fix(a11y): fix linting issues
ulates-sap Oct 10, 2024
3af58bc
Merge branch 'develop' into feature/CXSPA-8041
ulates-sap Oct 10, 2024
e3d77e3
fix(a11y): fix PR SonnarQube issue
ulates-sap Oct 10, 2024
821a8cb
fix: address PR comment - make method protected
ulates-sap Oct 17, 2024
38fb430
fix: address PR comment - add unit tests for newly added getCardRole …
ulates-sap Oct 17, 2024
30b2b6b
fix: address PR comment - add unit tests for newly added getCardRole …
ulates-sap Oct 17, 2024
b7c7d2c
Merge branch 'develop' into feature/CXSPA-8041
ulates-sap Oct 17, 2024
24442f0
Merge branch 'develop' into feature/CXSPA-8041
ulates-sap Oct 17, 2024
d77acbd
fix: address PR comments related to tests.
ulates-sap Oct 17, 2024
7a5ffd8
fix: address PR comments related to tests - fix linting errors.
ulates-sap Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions ...checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,10 @@ export class CheckoutDeliveryAddressComponent implements OnInit {
const numbers = getAddressNumbers(address, textPhone, textMobile);
const isSelected: boolean = selected && selected.id === address.id;

const role = this.getCardRole(isSelected);

return {
role: 'region',
role,
title: address.defaultAddress ? textDefaultDeliveryAddress : '',
textBold: address.firstName + ' ' + address.lastName,
text: [
Expand Down Expand Up @@ -225,7 +227,11 @@ export class CheckoutDeliveryAddressComponent implements OnInit {
'checkoutAddress.defaultDeliveryAddress'
),
this.translationService.translate('checkoutAddress.shipToThisAddress'),
this.translationService.translate('addressCard.selected'),
this.featureConfigService?.isEnabled(
'a11ySelectLabelWithContextForSelectedAddrOrPayment'
)
? this.translationService.translate('addressCard.selectedAddress')
: this.translationService.translate('addressCard.selected'),
this.translationService.translate('addressCard.phoneNumber'),
this.translationService.translate('addressCard.mobileNumber'),
]);
Expand Down Expand Up @@ -329,4 +335,12 @@ export class CheckoutDeliveryAddressComponent implements OnInit {
protected shouldUseAddressSavedInCart(): boolean {
return !!this.checkoutConfigService?.shouldUseAddressSavedInCart();
}

private getCardRole(isCardSelected: boolean): 'button' | 'region' {
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice use of the feature flags here! Lets make this method protected instead of private so that lib users can still access it if they have a need to see/modify it without cloning the repo.

Copy link
Contributor

Choose a reason for hiding this comment

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

Lets also add a unit test assertion to check that the role is set correctly since there is some logic 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.

👍 Addressed both of these in latest commit!

const isButtonRole =
this.featureConfigService?.isEnabled(
'a11ySelectLabelWithContextForSelectedAddrOrPayment'
) && !isCardSelected;
return isButtonRole ? 'button' : 'region';
}
}
13 changes: 11 additions & 2 deletions ...ibs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,11 @@ export class CheckoutPaymentMethodComponent implements OnInit, OnDestroy {
this.selectedMethod$,
this.translationService.translate('paymentForm.useThisPayment'),
this.translationService.translate('paymentCard.defaultPaymentMethod'),
this.translationService.translate('paymentCard.selected'),
this.featureConfigService?.isEnabled(
'a11ySelectLabelWithContextForSelectedAddrOrPayment'
)
? this.translationService.translate('paymentCard.selectedPayment')
: this.translationService.translate('paymentCard.selected'),
]).pipe(
tap(([paymentMethods, selectedMethod]) =>
this.selectDefaultPaymentMethod(paymentMethods, selectedMethod)
Expand Down Expand Up @@ -299,9 +303,14 @@ export class CheckoutPaymentMethodComponent implements OnInit, OnDestroy {
'a11yHideSelectBtnForSelectedAddrOrPayment'
);
const isSelected = selected?.id === paymentDetails.id;
const isButtonRole =
this.featureConfigService?.isEnabled(
'a11ySelectLabelWithContextForSelectedAddrOrPayment'
) && !isSelected;
const role = isButtonRole ? 'button' : 'region';

return {
role: 'region',
role,
Zeyber marked this conversation as resolved.
Show resolved Hide resolved
title: paymentDetails.defaultPayment
? cardLabels.textDefaultPaymentMethod
: '',
Expand Down
1 change: 1 addition & 0 deletions feature-libs/user/profile/assets/translations/en/address.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"addressCard": {
"default": "DEFAULT",
"selected": "Selected",
"selectedAddress": "Selected Address",
"setAsDefault": "Set as default",
"shipTo": "Ship To",
"billTo": "Bill To",
Expand Down
1 change: 1 addition & 0 deletions projects/assets/src/translations/en/payment.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"defaultPaymentLabel": "Default payment method",
"additionalPaymentLabel": "Additional payment method {{ number }}",
"selected": "Selected",
"selectedPayment": "Selected Payment",
"deletePaymentSuccess": "Payment method deleted successfully"
},
"paymentTypes": {
Expand Down
8 changes: 8 additions & 0 deletions projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,13 @@ export interface FeatureTogglesInterface {
*/
a11yHideSelectBtnForSelectedAddrOrPayment?: boolean;

/**
* If enabled, the "Checkout Shipping address/Payment" views
* will have a more a11y friendly selected label, including the context
* indicating weather the user is on a selected Address or Payment regsion.
*/
a11ySelectLabelWithContextForSelectedAddrOrPayment?: boolean;

/**
* Determines whether the controls in the `CarouselComponent` are focusable and accessible from the keyboard.
*/
Expand Down Expand Up @@ -677,6 +684,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
a11yUnitsListKeyboardControls: false,
a11yCartItemsLinksStyles: false,
a11yHideSelectBtnForSelectedAddrOrPayment: false,
a11ySelectLabelWithContextForSelectedAddrOrPayment: false,
a11yFocusableCarouselControls: false,
a11yUseTrapTabInsteadOfTrapInDialogs: false,
cmsGuardsServiceUseGuardsComposer: false,
Expand Down
1 change: 1 addition & 0 deletions projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@ if (environment.cpq) {
a11yUnitsListKeyboardControls: true,
a11yCartItemsLinksStyles: true,
a11yHideSelectBtnForSelectedAddrOrPayment: true,
a11ySelectLabelWithContextForSelectedAddrOrPayment: true,
a11yFocusableCarouselControls: true,
a11yUseTrapTabInsteadOfTrapInDialogs: true,
cmsGuardsServiceUseGuardsComposer: true,
Expand Down
Loading