Merge branch 'develop' into bugfix/CXSPA-9072

SAP · Jan 30, 2025 · 7962d98 · 7962d98
2 parents c5ee15c + b3a63b1
commit 7962d98
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/projects/assets/src/translations/en/common.json b/projects/assets/src/translations/en/common.json
@@ -27,6 +27,7 @@
     "loaded": "Loaded",
     "results": "Results",
     "of": "of",
+    "ngSelectDropdownOptionsList": "Options",
     "required": "required",
     "zoomIn": "Zoom in",
     "zoomOut": "Zoom out",

diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -614,6 +614,12 @@ export interface FeatureTogglesInterface {
    */
   a11yNgSelectCloseDropdownOnEscape?: boolean;
 
+  /**
+   * 'NgSelectA11yDirective' will customize a ng-select dropdowns by setting custom
+   * ariaLabelDropdown ng-select attribute value to provided common.ngSelectDropdownOptionsList translation
+   */
+  a11yNgSelectAriaLabelDropdownCustomized?: boolean;
+
   /**
    * Removes duplicated error message from 'CancelOrderComponent'.
    */
@@ -1084,6 +1090,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDeliveryModeRadiogroup: false,
   a11yNgSelectOptionsCount: false,
   a11yNgSelectCloseDropdownOnEscape: false,
+  a11yNgSelectAriaLabelDropdownCustomized: false,
   a11yRepeatedCancelOrderError: false,
   a11yAddedToCartActiveDialog: false,
   a11yNgSelectMobileReadout: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -389,6 +389,7 @@ if (environment.cpq) {
          */
         a11yNgSelectOptionsCount: false,
         a11yNgSelectCloseDropdownOnEscape: true,
+        a11yNgSelectAriaLabelDropdownCustomized: true,
         a11yRepeatedCancelOrderError: true,
         a11yAddedToCartActiveDialog: true,
         a11yNgSelectMobileReadout: true,

diff --git a/projects/storefrontlib/shared/components/ng-select-a11y/ng-select-a11y.directive.ts b/projects/storefrontlib/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
@@ -41,10 +41,6 @@ export class NgSelectA11yDirective implements AfterViewInit {
    */
   @Input() cxNgSelectA11y: { ariaLabel?: string; ariaControls?: string };
 
-  //TODO: CXSPA-9005: Remove this property in next major release
-  /**
-   * @deprecated since 2211.33
-   */
   protected translationService = inject(TranslationService);
   protected domSanitizer = inject(DomSanitizer);
   protected selectComponent = inject(NgSelectComponent);
@@ -105,6 +101,13 @@ export class NgSelectA11yDirective implements AfterViewInit {
 
     this.renderer.setAttribute(inputCombobox, 'role', 'combobox');
     this.renderer.setAttribute(inputCombobox, 'aria-expanded', 'false');
+    if (
+      this.featureConfigService?.isEnabled(
+        'a11yNgSelectAriaLabelDropdownCustomized'
+      )
+    ) {
+      this.customizeNgSelectAriaLabelDropdown();
+    }
 
     const isOpened$ = this.selectComponent.openEvent.pipe(map(() => 'true'));
     const isClosed$ = this.selectComponent.closeEvent.pipe(map(() => 'false'));
@@ -202,4 +205,13 @@ export class NgSelectA11yDirective implements AfterViewInit {
     }
     observer.disconnect();
   }
+
+  customizeNgSelectAriaLabelDropdown() {
+    this.translationService
+      .translate('common.ngSelectDropdownOptionsList')
+      .pipe(take(1))
+      .subscribe((translation) => {
+        this.selectComponent.ariaLabelDropdown = translation;
+      });
+  }
 }