fix: (CXSPA-1128) - NgSelect double stop on mobile alternative fix

projects/storefrontlib/shared/components/ng-select-a11y/ng-select-a11y.directive.spec.ts

@@ -65,12 +65,10 @@ describe('NgSelectA11yDirective', () => {
 
     const select = getNgSelect().nativeElement;
     const innerDiv = select.querySelector("[role='combobox']");
-    const inputElement = select.querySelector('input');
 
     expect(innerDiv).toBeTruthy();
     expect(innerDiv.getAttribute('aria-controls')).toEqual('size-results');
     expect(innerDiv.getAttribute('aria-label')).toEqual('Size');
-    expect(inputElement.getAttribute('aria-hidden')).toEqual('true');
   });
 
   it('should append aria-label to options', (done) => {

projects/storefrontlib/shared/components/ng-select-a11y/ng-select-a11y.directive.ts

@@ -11,10 +11,12 @@ import {
   HostListener,
   inject,
   Input,
+  Optional,
   Renderer2,
 } from '@angular/core';
 import { FeatureConfigService, TranslationService } from '@spartacus/core';
-import { take } from 'rxjs';
+import { filter, take } from 'rxjs';
+import { BREAKPOINT, BreakpointService } from '../../../layout';
 
 @Directive({
   selector: '[cxNgSelectA11y]',
@@ -41,6 +43,10 @@ export class NgSelectA11yDirective implements AfterViewInit {
     observer.observe(this.elementRef.nativeElement, { childList: true });
   }
 
+  @Optional() breakpointService = inject(BreakpointService, { optional: true });
+
+  ariaLabelAttribute = 'aria-label';
+
   constructor(
     private renderer: Renderer2,
     private elementRef: ElementRef
@@ -56,7 +62,11 @@ export class NgSelectA11yDirective implements AfterViewInit {
     const ariaControls = this.cxNgSelectA11y.ariaControls ?? elementId;
 
     if (ariaLabel) {
-      this.renderer.setAttribute(divCombobox, 'aria-label', ariaLabel);
+      this.renderer.setAttribute(
+        divCombobox,
+        this.ariaLabelAttribute,
+        ariaLabel
+      );
     }
 
     if (ariaControls) {
@@ -67,7 +77,19 @@ export class NgSelectA11yDirective implements AfterViewInit {
       this.featureConfigService.isEnabled('a11yNgSelectMobileReadout') &&
       inputElement.readOnly
     ) {
-      this.renderer.setAttribute(inputElement, 'aria-hidden', 'true');
+      const selectObserver = new MutationObserver((changes, observer) => {
+        this.appendValueToAriaLabel(changes, observer, divCombobox);
+      });
+
+      this.breakpointService
+        ?.isDown(BREAKPOINT.md)
+        .pipe(filter(Boolean), take(1))
+        .subscribe(() => {
+          selectObserver.observe(this.elementRef.nativeElement, {
+            subtree: true,
+            characterData: true,
+          });
+        });
     }
   }
 
@@ -85,11 +107,37 @@ export class NgSelectA11yDirective implements AfterViewInit {
           options.forEach(
             (option: HTMLOptionElement, index: string | number) => {
               const ariaLabel = `${option.innerText}, ${+index + 1} ${translation} ${options.length}`;
-              this.renderer.setAttribute(option, 'aria-label', ariaLabel);
+              this.renderer.setAttribute(
+                option,
+                this.ariaLabelAttribute,
+                ariaLabel
+              );
             }
           );
         });
     }
     observerInstance.disconnect();
   }
+
+  appendValueToAriaLabel(
+    _changes: any,
+    observer: MutationObserver,
+    divCombobox: HTMLElement
+  ) {
+    const valueLabel =
+      this.elementRef.nativeElement.querySelector('.ng-value-label')?.innerText;
+    if (valueLabel) {
+      const comboboxAriaLabel =
+        divCombobox?.getAttribute(this.ariaLabelAttribute) || '';
+      const valueElement =
+        this.elementRef.nativeElement.querySelector('.ng-value');
+      this.renderer.setAttribute(valueElement, 'aria-hidden', 'true');
+      this.renderer.setAttribute(
+        divCombobox,
+        this.ariaLabelAttribute,
+        comboboxAriaLabel + ', ' + valueLabel
+      );
+    }
+    observer.disconnect();
+  }
 }