Merge branch 'develop' into feature-CXSPA-8580_ccv2_s2_ci_trials

feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html

@@ -6,9 +6,10 @@
  *ngIf="hasStock"
  [max]="maxQuantity"
  [control]="addToCartForm.get('quantity')"
+ [ariaDescribedById]="'add-to-card-stock-info'"
  ></cx-item-counter>
 
- <span class="info">
+ <span class="info" id="add-to-card-stock-info">
  <span *ngIf="showInventory$ | async">{{ getInventory() }}</span>
  {{
  hasStock

feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html

@@ -25,6 +25,7 @@
  <button
  type="button"
  class="close"
+ title="{{ 'common.close' | cxTranslate }}"
  attr.aria-label="{{ 'addToCart.closeModal' | cxTranslate }}"
  (click)="dismissModal('Cross click')"
  >

feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html

@@ -305,9 +305,12 @@
  <ng-container *ngIf="countries$ | async as countries">
  <div *ngIf="countries.length !== 0">
  <label>
- <span class="label-content required">{{
- 'addressForm.country' | cxTranslate
- }}</span>
+ <span class="label-content required">
+ {{ 'addressForm.country' | cxTranslate }}
+ <ng-template
+ [ngTemplateOutlet]="requiredAsterisk"
+ ></ng-template>
+ </span>
  <ng-select
  [inputAttrs]="{ required: 'true' }"
  [searchable]="true"
@@ -346,9 +349,12 @@
  </div>
  <div class="form-group">
  <label>
- <span class="label-content required">{{
- 'addressForm.firstName.label' | cxTranslate
- }}</span>
+ <span class="label-content required">
+ {{ 'addressForm.firstName.label' | cxTranslate }}
+ <ng-template
+ [ngTemplateOutlet]="requiredAsterisk"
+ ></ng-template>
+ </span>
  <input
  required="true"
  class="form-control"
@@ -376,9 +382,12 @@
  </div>
  <div class="form-group">
  <label>
- <span class="label-content required">{{
- 'addressForm.lastName.label' | cxTranslate
- }}</span>
+ <span class="label-content required">
+ {{ 'addressForm.lastName.label' | cxTranslate }}
+ <ng-template
+ [ngTemplateOutlet]="requiredAsterisk"
+ ></ng-template>
+ </span>
  <input
  required="true"
  type="text"
@@ -406,9 +415,12 @@
  </div>
  <div class="form-group">
  <label>
- <span class="label-content required">{{
- 'addressForm.address1' | cxTranslate
- }}</span>
+ <span class="label-content required">
+ {{ 'addressForm.address1' | cxTranslate }}
+ <ng-template
+ [ngTemplateOutlet]="requiredAsterisk"
+ ></ng-template>
+ </span>
  <input
  required="true"
  type="text"
@@ -450,9 +462,12 @@
  <div class="row">
  <div class="form-group col-md-6">
  <label>
- <span class="label-content required">{{
- 'addressForm.city.label' | cxTranslate
- }}</span>
+ <span class="label-content required">
+ {{ 'addressForm.city.label' | cxTranslate }}
+ <ng-template
+ [ngTemplateOutlet]="requiredAsterisk"
+ ></ng-template>
+ </span>
  <input
  required="true"
  type="text"
@@ -480,9 +495,12 @@
  </div>
  <div class="form-group col-md-6">
  <label>
- <span class="label-content required">{{
- 'addressForm.zipCode.label' | cxTranslate
- }}</span>
+ <span class="label-content required">
+ {{ 'addressForm.zipCode.label' | cxTranslate }}
+ <ng-template
+ [ngTemplateOutlet]="requiredAsterisk"
+ ></ng-template>
+ </span>
  <input
  required="true"
  type="text"
@@ -600,6 +618,7 @@
  <abbr
  *cxFeature="'a11yRequiredAsterisks'"
  class="text-decoration-none"
+ aria-hidden="true"
  title="{{ 'common.required' | cxTranslate }}"
  >*</abbr
  >

feature-libs/pickup-in-store/assets/translations/en/pickupInStore.json

@@ -36,7 +36,7 @@
  "findAStore": "Find a Store",
  "findStores": "Find Stores",
  "hideOutOfStockOptions": "Hide out of stock options",
- "searchPlaceholder": "Enter Zip Code, Town or Address",
+ "searchPlaceholder": "Enter Zip Code or Town or Address",
  "useMyLocation": "Use my location"
  },
  "addressBookPickupInStore": {

feature-libs/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.ts

@@ -10,6 +10,7 @@ import {
  Page,
  PointOfService,
  RoutingService,
+ useFeatureStyles,
 } from '@spartacus/core';
 import {
  PickupLocationsSearchFacade,
@@ -66,6 +67,8 @@ export class MyPreferredStoreComponent implements OnInit {
  this.pointOfService = store;
  })
  );
+
+ useFeatureStyles('a11yViewHoursButtonIconContrast');
  }
 
  ngOnInit(): void {

feature-libs/pickup-in-store/components/presentational/store/store.component.ts

@@ -31,6 +31,7 @@ export class StoreComponent implements OnInit {
 
  constructor() {
  useFeatureStyles('a11yVisibleFocusOverflows');
+ useFeatureStyles('a11yViewHoursButtonIconContrast');
  }
 
  ngOnInit(): void {

feature-libs/pickup-in-store/styles/_my-preferred-store.scss

@@ -10,6 +10,9 @@
  .cx-store-opening-hours-icon {
  color: var(--cx-color-secondary);
  opacity: var(--cx-opacity, 0.5);
+ @include forFeature('a11yViewHoursButtonIconContrast') {
+ opacity: var(--cx-opacity, 1);
+ }
  }
  padding-inline-start: 0;
  padding-top: 0.5rem;

feature-libs/pickup-in-store/styles/_store.scss

@@ -33,6 +33,9 @@
  .cx-store-opening-hours-icon {
  color: var(--cx-color-secondary);
  opacity: var(--cx-opacity, 0.5);
+ @include forFeature('a11yViewHoursButtonIconContrast') {
+ opacity: var(--cx-opacity, 1);
+ }
  }
  padding-inline-start: 0;
  padding-top: 0.5rem;

feature-libs/storefinder/assets/translations/en/storeFinder.json

@@ -22,7 +22,7 @@
  "useMyLocation": "Use my location",
  "viewAllStores": "View all stores",
  "contactUs": "Contact us",
- "searchBox": "Postal code, town or address",
+ "searchBox": "Postal code or town or address",
  "backToList": "Back to list",
  "noStoresMessage": "No stores found in database...",
  "geolocationNotEnabled": "Cannot locate nearby stores. Geolocation consent has not been enabled",

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -582,6 +582,12 @@ export interface FeatureTogglesInterface {
  */
  a11ySearchBoxFocusOnEscape?: boolean;
 
+ /**
+ * `StoreComponent and MyPreferredStoreComponent` an icon in a button that triggers showing
+ * store's opening hours has an acceptable contrast ratio in a default theme
+ */
+ a11yViewHoursButtonIconContrast?: boolean;
+
  /**
  * In OCC cart requests, it puts parameters of a cart name and cart description
  * into a request body, instead of query params.
@@ -654,37 +660,37 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
  propagateErrorsToServer: false,
  ssrStrictErrorHandlingForHttpAndNgrx: false,
  productConfiguratorDeltaRendering: false,
- a11yRequiredAsterisks: false,
- a11yQuantityOrderTabbing: false,
- a11yNavigationUiKeyboardControls: false,
+ a11yRequiredAsterisks: true,
+ a11yQuantityOrderTabbing: true,
+ a11yNavigationUiKeyboardControls: true,
  a11yNavMenuExpandStateReadout: false,
- a11yOrderConfirmationHeadingOrder: false,
- a11yStarRating: false,
- a11yViewChangeAssistiveMessage: false,
+ a11yOrderConfirmationHeadingOrder: true,
+ a11yStarRating: true,
+ a11yViewChangeAssistiveMessage: true,
  a11yPreventHorizontalScroll: false,
- a11yReorderDialog: false,
- a11yPopoverFocus: false,
- a11yScheduleReplenishment: false,
- a11yScrollToTop: false,
- a11ySavedCartsZoom: false,
- a11ySortingOptionsTruncation: false,
- a11yExpandedFocusIndicator: false,
- a11yCheckoutDeliveryFocus: false,
- a11yMobileVisibleFocus: false,
- a11yOrganizationsBanner: false,
- a11yOrganizationListHeadingOrder: false,
+ a11yReorderDialog: true,
+ a11yPopoverFocus: true,
+ a11yScheduleReplenishment: true,
+ a11yScrollToTop: true,
+ a11ySavedCartsZoom: true,
+ a11ySortingOptionsTruncation: true,
+ a11yExpandedFocusIndicator: true,
+ a11yCheckoutDeliveryFocus: true,
+ a11yMobileVisibleFocus: true,
+ a11yOrganizationsBanner: true,
+ a11yOrganizationListHeadingOrder: true,
  a11yCartImportConfirmationMessage: false,
- a11yReplenishmentOrderFieldset: false,
- a11yListOversizedFocus: false,
- a11yStoreFinderOverflow: false,
+ a11yReplenishmentOrderFieldset: true,
+ a11yListOversizedFocus: true,
+ a11yStoreFinderOverflow: true,
  a11yMobileFocusOnFirstNavigationItem: false,
- a11yCartSummaryHeadingOrder: false,
+ a11yCartSummaryHeadingOrder: true,
  a11ySearchBoxMobileFocus: false,
  a11yFacetKeyboardNavigation: false,
- a11yUnitsListKeyboardControls: false,
- a11yCartItemsLinksStyles: false,
+ a11yUnitsListKeyboardControls: true,
+ a11yCartItemsLinksStyles: true,
  a11yHideSelectBtnForSelectedAddrOrPayment: false,
- a11yFocusableCarouselControls: false,
+ a11yFocusableCarouselControls: true,
  a11yUseTrapTabInsteadOfTrapInDialogs: false,
  cmsGuardsServiceUseGuardsComposer: false,
  cartQuickOrderRemoveListeningToFailEvent: true,
@@ -725,6 +731,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
  a11yDialogTriggerRefocus: false,
  a11yAddToWishlistFocus: false,
  a11ySearchBoxFocusOnEscape: false,
+ a11yViewHoursButtonIconContrast: false,
  occCartNameAndDescriptionInHttpRequestBody: false,
  cmsBottomHeaderSlotUsingFlexStyles: false,
  useSiteThemeService: false,

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -376,6 +376,7 @@ if (environment.cpq) {
  a11yDialogTriggerRefocus: true,
  a11yAddToWishlistFocus: true,
  a11ySearchBoxFocusOnEscape: true,
+ a11yViewHoursButtonIconContrast: true,
  cmsBottomHeaderSlotUsingFlexStyles: true,
  useSiteThemeService: false,
  enableConsecutiveCharactersPasswordRequirement: true,

projects/storefrontlib/cms-components/misc/message/message.component.html

@@ -103,6 +103,7 @@
  (click)="closeMessage.emit()"
  [attr.aria-label]="'common.close' | cxTranslate"
  [cxAtMessage]="'common.close' | cxTranslate"
+ title="{{ 'common.close' | cxTranslate }}"
  class="close"
  type="button"
  >

projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html

@@ -63,7 +63,7 @@
  class="results"
  id="results"
  (click)="close($any($event), true)"
- role="dialog"
+ role="listbox"
  [class.no-headers]="
  !isEnabledFeature(searchBoxFeatures.RECENT_SEARCHES_FEATURE) &&
  !isEnabledFeature(searchBoxFeatures.TRENDING_SEARCHES_FEATURE) &&

projects/storefrontlib/shared/components/item-counter/item-counter.component.html

@@ -21,6 +21,7 @@
  (keyup.enter)="updateValue()"
  [cxFocus]="{ key: 'qty' }"
  attr.aria-label="{{ 'itemCounter.quantity' | cxTranslate }}"
+ [attr.aria-describedby]="ariaDescribedById"
 />
 <button
  type="button"

projects/storefrontlib/shared/components/item-counter/item-counter.component.ts

@@ -65,6 +65,12 @@ export class ItemCounterComponent implements OnInit, OnDestroy {
  */
  @Input() allowZero = false;
 
+ /**
+ * ID of the element associated with the number input,
+ * so it gets narrated by a screen reader
+ */
+ @Input() ariaDescribedById: string = '';
+
  /**
  * In readonly mode the item counter will only be shown as a label,
  * the form controls are not rendered.