Merge branch 'develop' into feature/CXSPA-8019

.github/workflows/minor-release.yml

@@ -1,4 +1,4 @@
-name: Minor Release
+name: Minor Release ${{ github.event.inputs.version }}
 
 on:
   workflow_dispatch:

feature-libs/cart/base/components/mini-cart/mini-cart.component.ts

@@ -6,6 +6,7 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ICON_TYPE } from '@spartacus/storefront';
+import { useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { MiniCartComponentService } from './mini-cart-component.service';
 
@@ -21,5 +22,7 @@ export class MiniCartComponent {
 
   total$: Observable<string> = this.miniCartComponentService.getTotalPrice();
 
-  constructor(protected miniCartComponentService: MiniCartComponentService) {}
+  constructor(protected miniCartComponentService: MiniCartComponentService) {
+    useFeatureStyles('a11yMiniCartFocusOnMobile');
+  }
 }

feature-libs/cart/base/styles/components/_mini-cart.scss

@@ -51,6 +51,18 @@
     }
   }
 
+  @include forFeature('a11yMiniCartFocusOnMobile') {
+    @include media-breakpoint-down(md) {
+      a {
+        &:focus {
+          outline-offset: -4px;
+          outline-color: var(--cx-color-inverse);
+          box-shadow: 0 0 0 2px var(--cx-color-visual-focus) inset;
+        }
+      }
+    }
+  }
+
   @mixin native-high-contrast-fix {
     @media (forced-colors: active) {
       a {

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

@@ -71,6 +71,7 @@
         class="quick-order-results-product-container"
       >
         <button
+          *cxFeature="'!a11yQuickOrderSearchListKeyboardNavigation'"
           (blur)="onBlur($event)"
           (mousedown)="add(product, $event)"
           (keydown.arrowdown)="focusNextChild($event)"
@@ -103,6 +104,42 @@
           </span>
           <span class="price">{{ product.price?.formattedValue }}</span>
         </button>
+        <button
+          *cxFeature="'a11yQuickOrderSearchListKeyboardNavigation'"
+          (blur)="onBlur($event)"
+          (mousedown)="add(product, $event)"
+          (keydown.arrowdown)="focusNextChild($event)"
+          (keydown.arrowup)="focusPreviousChild($event)"
+          (keydown.enter)="add(product, $event)"
+          (keydown.escape)="clear($event)"
+          (keydown.tab)="close()"
+          (keydown.shift.tab)="close()"
+          [class.has-media]="
+            config?.quickOrder?.searchForm?.displayProductImages
+          "
+          class="quick-order-results-product"
+          role="option"
+        >
+          <cx-media
+            *ngIf="config?.quickOrder?.searchForm?.displayProductImages"
+            [alt]="product.name"
+            [container]="product.images?.PRIMARY"
+            class="media"
+            format="thumbnail"
+            role="presentation"
+          ></cx-media>
+          <div class="name" [innerHTML]="product.name"></div>
+          <span class="id">
+            {{
+              'quickOrderForm.id'
+                | cxTranslate
+                  : {
+                      id: product.code,
+                    }
+            }}
+          </span>
+          <span class="price">{{ product.price?.formattedValue }}</span>
+        </button>
       </li>
     </ul>
 

feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.html

@@ -168,10 +168,19 @@
                     class="cx-unit-level-order-history-value"
                   >
                     {{ order?.orgCustomer?.name }}
-                    <span class="text-ellipsis">{{
-                      order?.orgCustomer?.email
-                    }}</span></a
-                  >
+                    <ng-container
+                      *cxFeature="'a11yTruncatedTextUnitLevelOrderHistory'"
+                    >
+                      <span>{{ order?.orgCustomer?.email }}</span>
+                    </ng-container>
+                    <ng-container
+                      *cxFeature="'!a11yTruncatedTextUnitLevelOrderHistory'"
+                    >
+                      <span class="text-ellipsis">{{
+                        order?.orgCustomer?.email
+                      }}</span>
+                    </ng-container>
+                  </a>
                 </td>
                 <td class="cx-unit-level-order-history-unit">
                   <div class="cx-unit-level-order-history-label">

feature-libs/organization/unit-order/components/unit-level-order-history/unit-level-order-history.component.ts

@@ -38,6 +38,7 @@ export class UnitLevelOrderHistoryComponent implements OnDestroy {
     protected translation: TranslationService
   ) {
     useFeatureStyles('a11yTruncatedTextForResponsiveView');
+    useFeatureStyles('a11yTruncatedTextUnitLevelOrderHistory');
   }
 
   orders$: Observable<OrderHistoryList | undefined> = this.unitOrdersFacade

feature-libs/organization/unit-order/styles/components/unit-level-order-history/_unit-level-order-history.scss

@@ -23,6 +23,9 @@
 
   .cx-unit-level-order-history-filter-label-wrapper {
     width: 200px;
+    @include forFeature('a11yTruncatedTextUnitLevelOrderHistory') {
+      width: unset;
+    }
     border: 1px solid var(--cx-color-secondary);
     border-radius: 3px;
   }
@@ -106,7 +109,7 @@
           padding-bottom: 1.25rem;
         }
       }
-
+      // TODO: Remove following .text-ellipsis block once 'a11yTruncatedTextUnitLevelOrderHistory' feature flag is removed
       .text-ellipsis {
         @include media-breakpoint-up(md) {
           overflow: hidden;

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

@@ -196,8 +196,8 @@
       "iconIncomplete": "Group has required attributes without selected values.",
       "iconComplete": "Group is complete.",
       "iconSubGroup": "Group has a sub-group.",
-      "next": "Navigate to next group.",
-      "previous": "Navigate to previous group.",
+      "next": "Navigate to next group: {{ group }}",
+      "previous": "Navigate to previous group: {{ group }}",
       "showMoreProductInfo": "Show more information for product {{ product }} or continue to configuration.",
       "showLessProductInfo": "Show less information for product {{ product }} or continue to configuration.",
       "productName": "Product Name",

feature-libs/product-configurator/rulebased/components/previous-next-buttons/configurator-previous-next-buttons.component.html

@@ -4,15 +4,27 @@
       class="btn btn-block btn-secondary cx-previous"
       [disabled]="isFirstGroup(configuration.owner) | async"
       (click)="onPrevious(configuration)"
-      [attr.aria-label]="'configurator.a11y.previous' | cxTranslate"
+      [attr.aria-label]="
+        'configurator.a11y.previous'
+          | cxTranslate
+            : {
+                group: getPreviousGroupDescription(configuration) | async,
+              }
+      "
     >
       {{ 'configurator.button.previous' | cxTranslate }}
     </button>
     <button
       class="btn btn-block btn-secondary cx-next"
       [disabled]="isLastGroup(configuration.owner) | async"
       (click)="onNext(configuration)"
-      [attr.aria-label]="'configurator.a11y.next' | cxTranslate"
+      [attr.aria-label]="
+        'configurator.a11y.next'
+          | cxTranslate
+            : {
+                group: getNextGroupDescription(configuration) | async,
+              }
+      "
     >
       {{ 'configurator.button.next' | cxTranslate }}
     </button>

feature-libs/product-configurator/rulebased/components/previous-next-buttons/configurator-previous-next-buttons.component.spec.ts

@@ -45,6 +45,14 @@ class MockConfiguratorGroupsService {
   }
 
   navigateToGroup() {}
+
+  getPreviousGroupDescription() {
+    return of('previousGroupDescription');
+  }
+
+  getNextGroupDescription() {
+    return of('nextGroupDescription');
+  }
 }
 
 const groups: Configurator.Group = {
@@ -336,7 +344,7 @@ describe('ConfigPreviousNextButtonsComponent', () => {
         'cx-previous',
         0,
         'aria-label',
-        'configurator.a11y.previous',
+        'configurator.a11y.previous group:previousGroupDescription',
         'configurator.button.previous'
       );
     });
@@ -349,7 +357,7 @@ describe('ConfigPreviousNextButtonsComponent', () => {
         'cx-next',
         0,
         'aria-label',
-        'configurator.a11y.next',
+        'configurator.a11y.next group:nextGroupDescription',
         'configurator.button.next'
       );
     });

feature-libs/product-configurator/rulebased/components/previous-next-buttons/configurator-previous-next-buttons.component.ts

@@ -76,6 +76,22 @@ export class ConfiguratorPreviousNextButtonsComponent {
     );
   }
 
+  getPreviousGroupDescription(
+    configuration: Configurator.Configuration
+  ): Observable<string> {
+    return this.configuratorGroupsService.getPreviousGroupDescription(
+      configuration
+    );
+  }
+
+  getNextGroupDescription(
+    configuration: Configurator.Configuration
+  ): Observable<string> {
+    return this.configuratorGroupsService.getNextGroupDescription(
+      configuration
+    );
+  }
+
   isFirstGroup(owner: CommonConfigurator.Owner): Observable<boolean> {
     return this.configuratorGroupsService
       .getPreviousGroupId(owner)

feature-libs/product-configurator/rulebased/components/product-title/configurator-product-title.component.html

@@ -46,25 +46,23 @@
         <div class="cx-detail-title">
           <span
             *ngIf="product.name"
-            [attr.aria-label]="'configurator.a11y.productName' | cxTranslate"
+            [attr.title]="'configurator.a11y.productName' | cxTranslate"
           >
             {{ product.name }}
           </span>
         </div>
         <div class="cx-code">
           <span
             *ngIf="product.code"
-            [attr.aria-label]="'configurator.a11y.productCode' | cxTranslate"
+            [attr.title]="'configurator.a11y.productCode' | cxTranslate"
           >
             {{ product.code }}
           </span>
         </div>
         <div class="cx-description">
           <span
             *ngIf="product.description"
-            [attr.aria-label]="
-              'configurator.a11y.productDescription' | cxTranslate
-            "
+            [attr.title]="'configurator.a11y.productDescription' | cxTranslate"
           >
             {{ product.description }}
           </span>

feature-libs/product-configurator/rulebased/components/product-title/configurator-product-title.component.spec.ts

@@ -704,40 +704,40 @@ describe('ConfigProductTitleComponent', () => {
       );
     });
 
-    it("should contain span element with 'aria-label' attribute  for product name that defines an accessible name to label the current element", () => {
+    it("should contain span element with 'title' attribute for product name that defines an accessible name to label the current element", () => {
       CommonConfiguratorTestUtilsService.expectElementContainsA11y(
         expect,
         htmlElem,
         'span',
         undefined,
         2,
-        'aria-label',
+        'title',
         'configurator.a11y.productName',
         mockProduct.name
       );
     });
 
-    it("should contain span element with 'aria-label' attribute for product code that defines an accessible name to label the current element", () => {
+    it("should contain span element with 'title' attribute for product code that defines an accessible name to label the current element", () => {
       CommonConfiguratorTestUtilsService.expectElementContainsA11y(
         expect,
         htmlElem,
         'span',
         undefined,
         3,
-        'aria-label',
+        'title',
         'configurator.a11y.productCode',
         mockProduct.code
       );
     });
 
-    it("should contain span element with 'aria-label' attribute for product description that defines an accessible name to label the current element", () => {
+    it("should contain span element with 'title' attribute for product description that defines an accessible name to label the current element", () => {
       CommonConfiguratorTestUtilsService.expectElementContainsA11y(
         expect,
         htmlElem,
         'span',
         undefined,
         4,
-        'aria-label',
+        'title',
         'configurator.a11y.productDescription',
         mockProduct.description
       );

feature-libs/product-configurator/rulebased/components/show-more/configurator-show-more.component.html

@@ -1,16 +1,7 @@
 <ng-container
   *ngIf="text && config.features?.productConfiguratorAttributeTypesV2"
 >
-  <span
-    [attr.aria-label]="
-      'configurator.a11y.itemDescription'
-        | cxTranslate
-          : {
-              item: productName,
-            }
-    "
-    [innerHTML]="textToShow"
-  ></span>
+  <span [innerHTML]="textToShow"></span>
 
   <button (click)="toggleShowMore()" *ngIf="showMore" tabindex="{{ tabIndex }}">
     <ng-container *ngIf="showHiddenText; else less"

feature-libs/product-configurator/rulebased/components/show-more/configurator-show-more.component.spec.ts

@@ -143,18 +143,6 @@ describe('ConfiguratorShowMoreComponent', () => {
       fixture.detectChanges();
     });
 
-    it("should contain span element with 'aria-label' attribute that defines an accessible name to label the current element", () => {
-      CommonConfiguratorTestUtilsService.expectElementContainsA11y(
-        expect,
-        htmlElem,
-        'span',
-        undefined,
-        0,
-        'aria-label',
-        'configurator.a11y.itemDescription item:Camera bundle'
-      );
-    });
-
     it("should contain button element with a content 'configurator.button.less'", () => {
       CommonConfiguratorTestUtilsService.expectElementContainsA11y(
         expect,