From b3a63b1f51f3422bcda41bfb8aa7ce3bdc1d130e Mon Sep 17 00:00:00 2001
From: Uros Lates <uroslates@gmail.com>
Date: Thu, 30 Jan 2025 11:45:00 +0100
Subject: [PATCH] fix: (CXSPA-9004) fix ng-select dropdown aria-label list
 wording duplication issue (#19942)

Closes: https://jira.tools.sap/browse/CXSPA-9004
---
 .../assets/src/translations/en/common.json    |  1 +
 .../feature-toggles/config/feature-toggles.ts |  7 +++++++
 .../spartacus/spartacus-features.module.ts    |  1 +
 .../ng-select-a11y.directive.ts               | 20 +++++++++++++++----
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/projects/assets/src/translations/en/common.json b/projects/assets/src/translations/en/common.json
index 01cc9c9759a..3b148a5f219 100644
--- 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
index ca3ac570fa7..04593cd4460 100644
--- 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
index 9623bf6507b..8cce537eaa5 100644
--- 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
index 418f7914b2e..31da59fa321 100644
--- 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;
+      });
+  }
 }