[ACS-10247] a11y fix: SR announces Start/End Date fields incorrectly in date popup (#11592)

* [ACS-10247] a11y fix: SR announces Start/End Date fields incorrectly in date popup

* fix

lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html

@@ -45,7 +45,7 @@
             id="adf-search-date-range-between-range-label">
             {{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.DATE_RANGE' | translate }}
         </mat-label>
-        <mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
+        <mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate" #adfDateRangeInput>
           <input
               matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
               data-automation-id="date-range-between-start-input"

lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.spec.ts

@@ -314,4 +314,19 @@ describe('SearchDateRangeComponent', () => {
         expect(component.form.controls.betweenEndDate.value).toBeNull();
         expect(component.reset).toHaveBeenCalled();
     });
+
+    it('should set aria-haspopup="false" on date range inputs', () => {
+        const inputEls: NodeListOf<HTMLInputElement> = component.dateRangeInput.nativeElement.querySelectorAll('input');
+
+        inputEls.forEach((input) => {
+            spyOn(input, 'setAttribute').and.callThrough();
+        });
+
+        component.ngAfterViewInit();
+
+        inputEls.forEach((input) => {
+            expect(input.setAttribute).toHaveBeenCalledWith('aria-haspopup', 'false');
+            expect(input.getAttribute('aria-haspopup')).toBe('false');
+        });
+    });
 });

lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts

@@ -15,7 +15,21 @@
  * limitations under the License.
  */
 
-import { Component, DestroyRef, effect, EventEmitter, inject, Inject, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import {
+    AfterViewInit,
+    Component,
+    DestroyRef,
+    effect,
+    ElementRef,
+    EventEmitter,
+    inject,
+    Inject,
+    Input,
+    OnInit,
+    Output,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
 import { endOfDay, isAfter, isBefore, isValid, parse } from 'date-fns';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE, MatDateFormats } from '@angular/material/core';
 import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
@@ -57,7 +71,7 @@ const DEFAULT_DATE_DISPLAY_FORMAT = 'dd-MMM-yy';
     encapsulation: ViewEncapsulation.None,
     host: { class: 'adf-search-date-range' }
 })
-export class SearchDateRangeComponent implements OnInit {
+export class SearchDateRangeComponent implements OnInit, AfterViewInit {
     @Input()
     dateFormat = DEFAULT_DATE_DISPLAY_FORMAT;
     @Input()
@@ -79,6 +93,8 @@ export class SearchDateRangeComponent implements OnInit {
     @Output()
     valid = new EventEmitter<boolean>();
 
+    @ViewChild('adfDateRangeInput', { static: false, read: ElementRef }) dateRangeInput: ElementRef;
+
     private readonly formBuilder = inject(FormBuilder);
 
     form = this.formBuilder.group<SearchDateRange>({
@@ -127,6 +143,13 @@ export class SearchDateRangeComponent implements OnInit {
         this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.onChange());
         this.onReset$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.reset());
     }
+
+    ngAfterViewInit() {
+        this.dateRangeInput.nativeElement.querySelectorAll('input').forEach((input: HTMLInputElement) => {
+            input.setAttribute('aria-haspopup', 'false');
+        });
+    }
+
     private updateValidators(dateRangeType: DateRangeType) {
         switch (dateRangeType) {
             case DateRangeType.BETWEEN: