diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html index b02a78abb6..9324e66d40 100644 --- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html +++ b/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 }} - + { expect(component.form.controls.betweenEndDate.value).toBeNull(); expect(component.reset).toHaveBeenCalled(); }); + + it('should set aria-haspopup="false" on date range inputs', () => { + const inputEls: NodeListOf = 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'); + }); + }); }); diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts index da368594a4..3977c22295 100644 --- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.ts +++ b/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(); + @ViewChild('adfDateRangeInput', { static: false, read: ElementRef }) dateRangeInput: ElementRef; + private readonly formBuilder = inject(FormBuilder); form = this.formBuilder.group({ @@ -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: