develop -> develop-next-major diff

feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html

@@ -23,7 +23,7 @@
           <abbr
             *cxFeature="'a11yRequiredAsterisks'"
             aria-hidden="true"
-            class="text-decoration-none"
+            class="text-decoration-none required-asterisk"
             title="{{ 'common.required' | cxTranslate }}"
             >*</abbr
           >

feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html

@@ -99,7 +99,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html

@@ -190,7 +190,7 @@
     <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
     <abbr
       *cxFeature="'a11yRequiredAsterisks'"
-      class="text-decoration-none"
+      class="text-decoration-none required-asterisk"
       aria-hidden="true"
       title="{{ 'common.required' | cxTranslate }}"
       >*</abbr

feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html

@@ -227,7 +227,7 @@
                   <abbr
                     *cxFeature="'a11yRequiredAsterisks'"
                     aria-hidden="true"
-                    class="text-decoration-none"
+                    class="text-decoration-none required-asterisk"
                     title="{{ 'common.required' | cxTranslate }}"
                     >*</abbr
                   ></span

feature-libs/checkout/base/components/checkout-billing-address/checkout-billing-address-form.component.html

@@ -224,7 +224,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/checkout/base/components/checkout-login/checkout-login.component.html

@@ -76,7 +76,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

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

@@ -618,7 +618,7 @@
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
     aria-hidden="true"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html

@@ -23,7 +23,7 @@
         <abbr
           *cxFeature="'a11yRequiredAsterisks'"
           aria-hidden="true"
-          class="text-decoration-none"
+          class="text-decoration-none required-asterisk"
           title="{{ 'common.required' | cxTranslate }}"
           >*</abbr
         >

feature-libs/checkout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json

@@ -9,6 +9,7 @@
     "recurrencePeriodType_MONTHLY": "Month",
     "dayOfMonth": "On day",
     "startOn": "Start on",
-    "repeatOnDays": "Repeat on the following days"
+    "repeatOnDays": "Repeat on the following days",
+    "duration": "Duration"
   }
 }

feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html

@@ -50,11 +50,20 @@
   >
     <div class="cx-replenishment-form-data-container">
       <div *ngIf="!isMonthly" class="cx-days">
-        <span class="form-data-label">{{
-          'checkoutScheduledReplenishment.every' | cxTranslate
-        }}</span>
+        <span
+          class="form-data-label"
+          *cxFeature="'!a11yScheduleReplenishment'"
+          >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</span
+        >
+        <label
+          class="form-data-label"
+          *cxFeature="'a11yScheduleReplenishment'"
+          for="order-replenishment-period-type"
+          >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</label
+        >
         <ng-container *ngIf="isWeekly; else isDaily">
           <select
+            id="order-replenishment-period-type"
             class="form-control"
             (change)="changeNumberOfWeeks($event.target.value)"
           >
@@ -71,6 +80,7 @@
         </ng-container>
         <ng-template #isDaily>
           <select
+            id="order-replenishment-period-type"
             class="form-control"
             (change)="changeNumberOfDays($event.target.value)"
           >
@@ -85,10 +95,29 @@
         </ng-template>
       </div>
       <div class="cx-month">
-        <span *ngIf="isMonthly" class="form-data-label">{{
-          'checkoutScheduledReplenishment.every' | cxTranslate
-        }}</span>
+        <ng-container *cxFeature="'!a11yScheduleReplenishment'">
+          <span *ngIf="isMonthly" class="form-data-label">{{
+            'checkoutScheduledReplenishment.every' | cxTranslate
+          }}</span>
+        </ng-container>
+        <ng-container *cxFeature="'a11yScheduleReplenishment'">
+          <label
+            *ngIf="isMonthly"
+            class="form-data-label"
+            for="order-replenishment-recurrence-period"
+            >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</label
+          >
+          <label
+            *ngIf="!isMonthly"
+            class="form-data-label"
+            for="order-replenishment-recurrence-period"
+            >{{
+              'checkoutScheduledReplenishment.duration' | cxTranslate
+            }}</label
+          >
+        </ng-container>
         <select
+          id="order-replenishment-recurrence-period"
           class="form-control"
           (change)="changeRecurrencePeriodType($event.target.value)"
         >
@@ -105,11 +134,22 @@
         </select>
       </div>
       <div *ngIf="isMonthly" class="cx-dayMonth">
-        <span class="form-data-label">{{
-          'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate
-        }}</span>
+        <span
+          class="form-data-label"
+          *cxFeature="'!a11yScheduleReplenishment'"
+          >{{ 'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate }}</span
+        >
+        <label
+          class="form-data-label"
+          *cxFeature="'a11yScheduleReplenishment'"
+          for="order-replenishment-day-of-month"
+          >{{
+            'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate
+          }}</label
+        >
         <div class="cx-day-of-month">
           <select
+            id="order-replenishment-day-of-month"
             class="form-control"
             (change)="changeDayOfTheMonth($event.target.value)"
           >

feature-libs/customer-ticketing/components/details/customer-ticketing-close/customer-ticketing-close-dialog/customer-ticketing-close-dialog.component.html

@@ -66,7 +66,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/customer-ticketing/components/list/customer-ticketing-create/customer-ticketing-create-dialog/customer-ticketing-create-dialog.component.html

@@ -175,7 +175,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/customer-ticketing/components/shared/customer-ticketing-dialog/customer-ticketing-dialog.component.ts

@@ -6,7 +6,7 @@
 
 import { Directive, ElementRef, HostListener } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { RoutingService } from '@spartacus/core';
+import { RoutingService, useFeatureStyles } from '@spartacus/core';
 import {
   CustomerTicketingConfig,
   CustomerTicketingFacade,
@@ -93,7 +93,9 @@ export abstract class CustomerTicketingDialogComponent {
     protected filesFormValidators: FilesFormValidators,
     protected customerTicketingFacade: CustomerTicketingFacade,
     protected routingService: RoutingService
-  ) {}
+  ) {
+    useFeatureStyles('a11yExpandedFocusIndicator');
+  }
 
   protected buildForm(): void {
     const form = new FormGroup({});

feature-libs/order/components/order-confirmation/order-guest-register-form/order-guest-register-form.component.html

@@ -92,7 +92,7 @@ <h3>{{ 'checkoutOrderConfirmation.createAccount' | cxTranslate }}</h3>
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/administration/components/budget/form/budget-form.component.html

@@ -202,7 +202,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/administration/components/cost-center/form/cost-center-form.component.html

@@ -133,7 +133,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/administration/components/permission/form/permission-form.component.html

@@ -33,9 +33,10 @@
       *ngIf="(types$ | async)?.length"
       [formGroup]="$any(form.get('orderApprovalPermissionType'))"
     >
-      <span class="label-content required">{{
-        'orgPurchaseLimit.orderApprovalPermissionType' | cxTranslate
-      }}</span>
+      <span class="label-content required">
+        {{ 'orgPurchaseLimit.orderApprovalPermissionType' | cxTranslate }}
+        <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
+      </span>
       <ng-select
         [inputAttrs]="{ required: 'true' }"
         formControlName="code"
@@ -68,9 +69,10 @@
     </label>
 
     <label *ngIf="form.get('periodRange')">
-      <span class="label-content required">{{
-        'orgPurchaseLimit.periodRange' | cxTranslate
-      }}</span>
+      <span class="label-content required">
+        {{ 'orgPurchaseLimit.periodRange' | cxTranslate }}
+        <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
+      </span>
       <ng-select
         [inputAttrs]="{ required: 'true' }"
         formControlName="periodRange"
@@ -101,9 +103,10 @@
       *ngIf="form.get('currency')"
       [formGroup]="$any(form.get('currency'))"
     >
-      <span class="label-content required">{{
-        'orgPurchaseLimit.currency' | cxTranslate
-      }}</span>
+      <span class="label-content required">
+        {{ 'orgPurchaseLimit.currency' | cxTranslate }}
+        <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
+      </span>
       <ng-select
         *ngIf="currencies$ | async as currencies"
         [inputAttrs]="{ required: 'true' }"
@@ -133,9 +136,10 @@
     </label>
 
     <label *ngIf="form.get('threshold')">
-      <span class="label-content required">{{
-        'orgPurchaseLimit.threshold' | cxTranslate
-      }}</span>
+      <span class="label-content required">
+        {{ 'orgPurchaseLimit.threshold' | cxTranslate }}
+        <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
+      </span>
       <input
         class="form-control"
         type="number"
@@ -198,7 +202,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/administration/components/unit/form/unit-form.component.html

@@ -164,7 +164,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/administration/components/unit/links/addresses/form/unit-address-form.component.html

@@ -258,7 +258,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/administration/components/user-group/form/user-group-form.component.html

@@ -93,7 +93,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/administration/components/user/change-password-form/user-change-password-form.component.html

@@ -80,7 +80,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/administration/components/user/form/user-form.component.html

@@ -204,7 +204,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/organization/user-registration/components/form/user-registration-form.component.html

@@ -396,7 +396,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
+    class="text-decoration-none required-asterisk"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

feature-libs/product-configurator/common/assets/translations/en/configurator.json

@@ -232,7 +232,7 @@
       "filterOverviewByGroup": "Filter configuration overview by group {{groupName}}",
       "closeConflictSolverModal": "Close conflict solver modal",
       "closeRestartDialog": "Close the \"Unfinished Configuration\" dialog and navigate back to the product details page",
-      "description": "Click to see a description for this value"
+      "description": "Click to see a description for value {{ value }}"
     },
     "variantCarousel": {
       "title": "Pre-configured Versions"