Skip to content

Commit

Permalink
fix: (CXSPA-8156) add landmark for checkout delivery address section
Browse files Browse the repository at this point in the history 
  * add landmarks for delivery mode and payment method

  * closes https://jira.tools.sap/browse/CXSPA-8156
  • Loading branch information
@StanislavSukhanov
StanislavSukhanov committed Oct 28, 2024
1 parent 582a636 commit 0be8816
Show file tree
Hide file tree
Showing 5 changed files with 243 additions and 218 deletions.
2 changes: 1 addition & 1 deletion ...eckout/base/components/checkout-delivery-address/checkout-delivery-address.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<section
*ngIf="
featureConfigService?.isEnabled('a11yCheckoutDeliveryAddressAddLandmark');
featureConfigService?.isEnabled('a11yCheckoutStepsLandmarks');
else content
"
[attr.aria-label]="'checkoutAddress.shippingAddress' | cxTranslate"
Expand Down
280 changes: 147 additions & 133 deletions ...ibs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,62 @@
<fieldset *cxFeature="'a11yDeliveryModeRadiogroup'" role="radiogroup">
<ng-container *cxFeature="'!showDeliveryOptionsTranslation'">
<legend class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'checkoutMode.deliveryMethod' | cxTranslate }}
</legend>
</ng-container>
<section
*ngIf="
featureConfigService?.isEnabled('a11yCheckoutStepsLandmarks');
else content
"
[attr.aria-label]="'checkoutProgress.deliveryMode' | cxTranslate"
>
<ng-template [ngTemplateOutlet]="content"></ng-template>
</section>

<ng-container *cxFeature="'showDeliveryOptionsTranslation'">
<legend class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'checkoutMode.deliveryOptions' | cxTranslate }}
</legend>
</ng-container>

<ng-container
*ngIf="
!(isUpdating$ | async) &&
(supportedDeliveryModes$ | async) as supportedDeliveryModes;
else loading
"
>
<div
*cxFeature="'!a11yRemoveStatusLoadedRole'"
role="status"
[attr.aria-label]="'common.loaded' | cxTranslate"
></div>
<div [formGroup]="mode" class="cx-delivery-mode-wrapper">
<div class="form-check" *ngFor="let mode of supportedDeliveryModes">
<input
[attr.aria-checked]="getAriaChecked(mode.code)"
class="form-check-input"
type="radio"
(change)="changeMode(mode.code, $event)"
(click)="changeMode(mode.code, $event)"
[value]="mode.code"
formControlName="deliveryModeId"
id="deliveryMode-{{ mode.code }}"
[attr.aria-label]="
mode.name +
' ' +
mode.description +
' ' +
mode.deliveryCost?.formattedValue
"
/>
<label
class="cx-delivery-label form-check-label form-radio-label"
for="deliveryMode-{{ mode.code }}"
aria-hidden="true"
>
<div class="cx-delivery-mode">
{{ mode.name }}
<span class="cx-delivery-mode-description"
>({{ mode.description }})</span
>
</div>
<div class="cx-delivery-price">
{{ mode.deliveryCost?.formattedValue }}
</div>
<div class="cx-delivery-details"></div>
</label>
</div>
<ng-template
[cxOutlet]="CartOutlets.DELIVERY_MODE"
[cxOutletContext]="{
item: activeCartFacade.getActive() | async,
}"
>
</ng-template>
</div>
</ng-container>
</fieldset>
<ng-template #content>
<fieldset *cxFeature="'a11yDeliveryModeRadiogroup'" role="radiogroup">
<ng-container *cxFeature="'!showDeliveryOptionsTranslation'">
<legend class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'checkoutMode.deliveryMethod' | cxTranslate }}
</legend>
</ng-container>

<ng-container *cxFeature="'!a11yDeliveryModeRadiogroup'">
<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'checkoutMode.deliveryMethod' | cxTranslate }}
</h2>
<ng-container *cxFeature="'showDeliveryOptionsTranslation'">
<legend class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'checkoutMode.deliveryOptions' | cxTranslate }}
</legend>
</ng-container>

<ng-container
*ngIf="
!(isUpdating$ | async) &&
(supportedDeliveryModes$ | async) as supportedDeliveryModes;
else loading
"
>
<div
*cxFeature="'!a11yRemoveStatusLoadedRole'"
role="status"
[attr.aria-label]="'common.loaded' | cxTranslate"
></div>
<div [formGroup]="mode" class="cx-delivery-mode-wrapper">
<div role="radiogroup">
<ng-container
*ngIf="
!(isUpdating$ | async) &&
(supportedDeliveryModes$ | async) as supportedDeliveryModes;
else loading
"
>
<div
*cxFeature="'!a11yRemoveStatusLoadedRole'"
role="status"
[attr.aria-label]="'common.loaded' | cxTranslate"
></div>
<div [formGroup]="mode" class="cx-delivery-mode-wrapper">
<div class="form-check" *ngFor="let mode of supportedDeliveryModes">
<input
[attr.aria-checked]="getAriaChecked(mode.code)"
class="form-check-input"
role="radio"
type="radio"
id="deliveryMode-{{ mode.code }}"
(change)="changeMode(mode.code, $event)"
(click)="changeMode(mode.code, $event)"
[value]="mode.code"
formControlName="deliveryModeId"
id="deliveryMode-{{ mode.code }}"
[attr.aria-label]="
mode.name +
' ' +
mode.description +
' ' +
mode.deliveryCost?.formattedValue
"
/>
<label
class="cx-delivery-label form-check-label form-radio-label"
for="deliveryMode-{{ mode.code }}"
aria-hidden="true"
>
<div class="cx-delivery-mode">
{{ mode.name }}
Expand All @@ -117,54 +70,115 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
<div class="cx-delivery-details"></div>
</label>
</div>
<ng-template
[cxOutlet]="CartOutlets.DELIVERY_MODE"
[cxOutletContext]="{
item: activeCartFacade.getActive() | async,
}"
>
</ng-template>
</div>
<ng-template
[cxOutlet]="CartOutlets.DELIVERY_MODE"
[cxOutletContext]="{
item: activeCartFacade.getActive() | async,
}"
>
</ng-template>
</div>
</ng-container>
</fieldset>

<ng-container *cxFeature="'!a11yDeliveryModeRadiogroup'">
<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'checkoutMode.deliveryMethod' | cxTranslate }}
</h2>

<ng-container
*ngIf="
!(isUpdating$ | async) &&
(supportedDeliveryModes$ | async) as supportedDeliveryModes;
else loading
"
>
<div
*cxFeature="'!a11yRemoveStatusLoadedRole'"
role="status"
[attr.aria-label]="'common.loaded' | cxTranslate"
></div>
<div [formGroup]="mode" class="cx-delivery-mode-wrapper">
<div role="radiogroup">
<div class="form-check" *ngFor="let mode of supportedDeliveryModes">
<input
[attr.aria-checked]="getAriaChecked(mode.code)"
class="form-check-input"
role="radio"
type="radio"
id="deliveryMode-{{ mode.code }}"
(change)="changeMode(mode.code, $event)"
(click)="changeMode(mode.code, $event)"
[value]="mode.code"
formControlName="deliveryModeId"
/>
<label
class="cx-delivery-label form-check-label form-radio-label"
for="deliveryMode-{{ mode.code }}"
>
<div class="cx-delivery-mode">
{{ mode.name }}
<span class="cx-delivery-mode-description"
>({{ mode.description }})</span
>
</div>
<div class="cx-delivery-price">
{{ mode.deliveryCost?.formattedValue }}
</div>
<div class="cx-delivery-details"></div>
</label>
</div>
</div>
<ng-template
[cxOutlet]="CartOutlets.DELIVERY_MODE"
[cxOutletContext]="{
item: activeCartFacade.getActive() | async,
}"
>
</ng-template>
</div>
</ng-container>
</ng-container>
</ng-container>

<ng-container *ngIf="activeCartFacade.hasPickupItems() | async">
<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'checkoutMode.deliveryEntries' | cxTranslate }}
</h2>
<ng-container *ngIf="activeCartFacade.hasPickupItems() | async">
<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
{{ 'checkoutMode.deliveryEntries' | cxTranslate }}
</h2>

<ng-template
[cxOutlet]="CartOutlets.CART_ITEM_LIST"
[cxOutletContext]="{
items: activeCartFacade.getDeliveryEntries() | async,
readonly: true,
}"
>
</ng-template>
</ng-container>
<ng-template
[cxOutlet]="CartOutlets.CART_ITEM_LIST"
[cxOutletContext]="{
items: activeCartFacade.getDeliveryEntries() | async,
readonly: true,
}"
>
</ng-template>
</ng-container>

<ng-template #loading>
<div class="cx-spinner">
<cx-spinner></cx-spinner>
</div>
</ng-template>
<ng-template #loading>
<div class="cx-spinner">
<cx-spinner></cx-spinner>
</div>
</ng-template>

<ng-container cxInnerComponentsHost></ng-container>
<ng-container cxInnerComponentsHost></ng-container>

<div class="row cx-checkout-btns">
<div class="col-md-12 col-lg-6">
<button class="btn btn-block btn-secondary" (click)="back()">
{{ backBtnText | cxTranslate }}
</button>
</div>
<div class="col-md-12 col-lg-6">
<button
class="btn btn-block btn-primary"
[disabled]="deliveryModeInvalid || (isSetDeliveryModeHttpError$ | async)"
(click)="next()"
>
{{ 'common.continue' | cxTranslate }}
</button>
<div class="row cx-checkout-btns">
<div class="col-md-12 col-lg-6">
<button class="btn btn-block btn-secondary" (click)="back()">
{{ backBtnText | cxTranslate }}
</button>
</div>
<div class="col-md-12 col-lg-6">
<button
class="btn btn-block btn-primary"
[disabled]="
deliveryModeInvalid || (isSetDeliveryModeHttpError$ | async)
"
(click)="next()"
>
{{ 'common.continue' | cxTranslate }}
</button>
</div>
</div>
</div>
</ng-template>
Loading

0 comments on commit 0be8816

Please sign in to comment.