[ACS-10206]: setting haspopup after init (#11475)

* [ACS-10206]: setting haspopup after init

* [ACS-10206]: sonarQube fixes

* [ACS-10206]: sonarQube fixes

* [ACS-10206]: sonarQube fixes

* [ACS-10206]: cleanup

* [ACS-10206]: revert

lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html

@@ -1,40 +1,65 @@
-<mat-chip [attr.data-automation-id]="'search-filter-chip-' + category.name"
+<mat-chip
-          [disableRipple]="true"
+    role="button"
-          class="adf-search-filter-chip"
+    [attr.data-automation-id]="'search-filter-chip-' + category.name"
-          [class.adf-search-toggle-chip]="(widget.getDisplayValue() | async) || menuTrigger.menuOpen"
+    [disableRipple]="true"
-          tabindex="0"
+    class="adf-search-filter-chip"
-          [matMenuTriggerFor]="menu"
+    [class.adf-search-toggle-chip]="(widget.getDisplayValue() | async) || menuTrigger.menuOpen"
-          (menuOpened)="onMenuOpen()"
+    tabindex="0"
-          (keydown.enter)="onEnterKeydown()"
+    [matMenuTriggerFor]="menu"
-          (keydown.escape)="onEscKeydown()"
+    (menuOpened)="onMenuOpen()"
-          [attr.title]="widget.getDisplayValue() | async"
+    (keydown.enter)="onEnterKeydown()"
-          #menuTrigger="matMenuTrigger">
+    (keydown.escape)="onEscKeydown()"
+    [attr.title]="widget.getDisplayValue() | async"
+    [attr.aria-label]="category.name | translate"
+    [attr.aria-expanded]="menuTrigger.menuOpen"
+    [attr.aria-haspopup]="'dialog'"
+    #menuTrigger="matMenuTrigger"
+>
     <span class="adf-search-filter-placeholder">
         <span class="adf-search-filter-ellipsis">{{ category.name | translate }}:</span>
     </span>
     <span class="adf-search-filter-ellipsis adf-filter-value" *ngIf="widget.getDisplayValue() | async as displayValue; else showAny">
         &nbsp;{{ displayValue | translate }}
     </span>
-    <ng-template #showAny><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template>
+    <ng-template #showAny
+        ><span class="adf-search-filter-ellipsis adf-filter-value">&nbsp;{{ 'SEARCH.FILTER.ANY' | translate }}</span></ng-template
+    >
     <mat-icon class="adf-search-filter-chip-icon" [adf-icon]="chipIcon" />
 </mat-chip>
 
-<mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" [class]="'adf-search-filter-chip-menu-panel adf-search-filter-chip-menu-panel-' + category.id" (closed)="onClosed()">
+<mat-menu
-    <div #menuContainer [attr.data-automation-id]="'search-field-' + category.name">
+    #menu="matMenu"
-        <adf-search-filter-menu-card (click)="$event.stopPropagation()"
+    class="adf-search-widget-extra-width"
-                                     (keydown.tab)="$event.stopPropagation();"
+    backdropClass="adf-search-filter-chip-menu"
-                                     (keydown.shift.tab)="$event.stopPropagation()"
+    [class]="'adf-search-filter-chip-menu-panel adf-search-filter-chip-menu-panel-' + category.id"
-                                     (close)="menuTrigger.closeMenu()">
+    (closed)="onClosed()"
-
+    role="presentation"
+>
+    <div
+        [attr.aria-label]="category.name | translate"
+        role="dialog"
+        aria-modal="false"
+        #menuContainer
+        [attr.data-automation-id]="'search-field-' + category.name"
+    >
+        <adf-search-filter-menu-card
+            (click)="$event.stopPropagation()"
+            (keydown.tab)="$event.stopPropagation()"
+            (keydown.shift.tab)="$event.stopPropagation()"
+            (close)="menuTrigger.closeMenu()"
+        >
             <ng-container ngProjectAs="filter-title">
-                {{ category.name | translate }} <ng-container *ngIf="category.component.settings.unit">({{category.component.settings.unit}})</ng-container>
+                {{ category.name | translate }}
+                <ng-container *ngIf="category.component.settings.unit">({{ category.component.settings.unit }})</ng-container>
             </ng-container>
 
             <ng-container ngProjectAs="filter-content">
-                <adf-search-widget-container #widget
+                <adf-search-widget-container
-                                             [id]="category.id"
+                    #widget
-                                             [selector]="category.component.selector"
+                    [id]="category.id"
-                                             [settings]="category.component.settings" />
+                    [selector]="category.component.selector"
+                    [settings]="category.component.settings"
+                />
             </ng-container>
 
             <ng-container ngProjectAs="filter-actions">

lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.spec.ts

@@ -105,4 +105,8 @@ describe('SearchWidgetChipComponent', () => {
         expect(focusTrap.destroy).toHaveBeenCalled();
         expect(component.focusTrap).toBeNull();
     });
+
+    it('should set aria-haspopup to "dialog" for matMenu trigger on initialization', () => {
+        expect(component.menuTriggerEl.nativeElement.getAttribute('aria-haspopup')).toBe('dialog');
+    });
 });

lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts

@@ -57,6 +57,9 @@ export class SearchWidgetChipComponent implements AfterViewInit {
     @ViewChild('menuContainer', { static: false })
     menuContainer: ElementRef;
 
+    @ViewChild('menuTrigger', { read: ElementRef, static: false })
+    menuTriggerEl: ElementRef;
+
     @ViewChild('menuTrigger', { static: false })
     menuTrigger: MatMenuTrigger;
 
@@ -78,6 +81,10 @@ export class SearchWidgetChipComponent implements AfterViewInit {
             .subscribe(() => {
                 this.cd.detectChanges();
             });
+
+        if (this.menuTriggerEl) {
+            this.menuTriggerEl.nativeElement.setAttribute('aria-haspopup', 'dialog');
+        }
     }
 
     onMenuOpen() {