Fix/announce dropdown state

CHANGELOG.md

@@ -1,3 +1,10 @@
+# v13.7.6 (2023-04-26)
+* **grid** add aria-expanded to filters btn
+* **grid** add tick to test
+* **grid** announce filter menu state collapsed/expanded
+* **a11y** filter messages that are announced
+* **a11y** add menu-trigger directive that sets aria-expanded
+
 # v13.7.5 (2022-11-22)
 * **dateformat** avoid using macrotasks using setTimeout generated a lot of macrotasks
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "13.7.5",
+  "version": "13.7.6",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

projects/angular/a11y/src/queued-announcer/queued-announcer.ts

@@ -16,7 +16,8 @@ export class QueuedAnnouncer {
 
     constructor(private _liveAnnouncer: LiveAnnouncer) { }
 
-    enqueue(msg: string) {
+    enqueue(msg: string | undefined) {
+        if (!msg) { return; }
         this._msgQueue.push(msg);
 
         if (!this._isAnnouncing) {

projects/angular/components/ui-grid/src/ui-grid.component.html

@@ -519,6 +519,7 @@
         <button *ngIf="hasAnyFiltersVisible$ | async"
                 [disabled]="disabled"
                 (click)="showFilters = !showFilters"
+                [attr.aria-expanded]="showFilters"
                 mat-button
                 type="button"
                 class="ui-grid-collapsible-filters-toggle">
@@ -537,6 +538,8 @@
             <button [matMenuTriggerFor]="filterOptions"
                     [disabled]="column.dropdown?.disabled || disabled"
                     [attr.data-column-name]="'ui-grid-dropdown-filter-' + (column.property || 'na')"
+                    [expandedTranslation]="intl.menuExpanded"
+                    uiCustomMatMenuTriggerFor
                     mat-button
                     type="button"
                     class="ui-grid-dropdown-filter-button">

projects/angular/components/ui-grid/src/ui-grid.component.spec.ts

@@ -1055,6 +1055,8 @@ describe('Component: UiGrid', () => {
 
                 expect(headerSelectionAction).toBeFalsy();
                 expect((grid.selectionManager as any)._hasValue$.getValue()).toBe(false);
+                tick(100);
+                discardPeriodicTasks();
             }));
 
             it('should be able to move focus to selection action button if at least one row is selected', () => {

projects/angular/components/ui-grid/src/ui-grid.intl.ts

@@ -118,6 +118,11 @@ export class UiGridIntl implements OnDestroy {
      *
      */
     clearCustomFilter = 'Clear custom filter';
+    /**
+     * Menu expanded message for live announcer.
+     *
+     */
+    menuExpanded = 'expanded';
     /**
      * No data row message alternative function.
      *

projects/angular/components/ui-grid/src/ui-grid.module.ts

@@ -12,6 +12,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { UiAutoAccessibleLabelModule } from '@uipath/angular/a11y';
 import { UiSuggestModule } from '@uipath/angular/components/ui-suggest';
+import { UiCustomMatMenuTriggerModule } from '@uipath/angular/directives/custom-mat-menu-trigger';
 import { UiNgLetModule } from '@uipath/angular/directives/ui-ng-let';
 import { UiVirtualScrollViewportResizeModule } from '@uipath/angular/directives/ui-virtual-scroll-viewport-resize';
 
@@ -51,6 +52,7 @@ import { UiGridComponent } from './ui-grid.component';
         UiVirtualScrollViewportResizeModule,
         UiAutoAccessibleLabelModule,
         UiNgLetModule,
+        UiCustomMatMenuTriggerModule,
     ],
     declarations: [
         UiGridComponent,

projects/angular/directives/custom-mat-menu-trigger/ng-package.json

@@ -0,0 +1 @@
+{}

projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts

@@ -0,0 +1,94 @@
+import {
+    Subject,
+    takeUntil,
+} from 'rxjs';
+
+import {
+    FocusMonitor,
+    LiveAnnouncer,
+} from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { Overlay } from '@angular/cdk/overlay';
+import {
+    AfterContentInit,
+    AfterViewInit,
+    Directive,
+    ElementRef,
+    Inject,
+    Input,
+    OnDestroy,
+    Optional,
+    Self,
+    ViewContainerRef,
+} from '@angular/core';
+import {
+    MatMenuItem,
+    MatMenuPanel,
+    MAT_MENU_PANEL,
+    MAT_MENU_SCROLL_STRATEGY,
+    _MatMenuTriggerBase,
+} from '@angular/material/menu';
+
+@Directive({
+    selector: '[uiCustomMatMenuTriggerFor]',
+})
+export class UiCustomMatMenuTriggerDirective extends _MatMenuTriggerBase implements AfterContentInit, AfterViewInit, OnDestroy {
+    @Input()
+    expandedTranslation = 'expanded';
+
+    nativeElement: HTMLElement;
+    private _destroyed$ = new Subject<void>();
+
+    constructor(
+        overlay: Overlay,
+        element: ElementRef<HTMLElement>,
+        viewContainerRef: ViewContainerRef,
+        @Inject(MAT_MENU_SCROLL_STRATEGY) scrollStrategy: any,
+        @Inject(MAT_MENU_PANEL) @Optional() parentMenu: MatMenuPanel,
+        @Optional() @Self() menuItemInstance: MatMenuItem,
+        @Optional() dir: Directionality,
+        focusMonitor: FocusMonitor | null,
+        private _liveAnnouncer: LiveAnnouncer,
+    ) {
+        super(overlay, element, viewContainerRef, scrollStrategy, parentMenu, menuItemInstance, dir, focusMonitor);
+        this.nativeElement = element.nativeElement;
+    }
+    ngAfterViewInit(): void {
+        this.nativeElement.setAttribute('aria-expanded', 'false');
+    }
+
+    ngAfterContentInit() {
+        this.menuOpened.pipe(
+            takeUntil(this._destroyed$),
+        ).subscribe(() => {
+            // although setting aria-expanded to true, it is not announced
+            this.nativeElement.setAttribute('aria-expanded', 'true');
+            this._liveAnnouncer.announce(this.expandedTranslation);
+
+            // after closing the menu it would appear for a short time as expanded
+            // therefore we set it as collapsed before it is actually closed
+            setTimeout(() => {
+                this.nativeElement.setAttribute('aria-expanded', 'false');
+            }, 100);
+        });
+
+        this.menuClosed.pipe(
+            takeUntil(this._destroyed$),
+        ).subscribe(() => {
+            this.nativeElement.setAttribute('aria-expanded', 'false');
+
+            // timeout is required because
+            // after focusing another element then returning to this one, it will lose collapsed state
+            setTimeout(() => {
+                this.nativeElement.setAttribute('aria-expanded', 'false');
+            }, 100);
+        });
+    }
+
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._destroyed$.next();
+        this._destroyed$.complete();
+    }
+}
+

projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { UiCustomMatMenuTriggerDirective } from './custom-mat-menu-trigger.directive';
+
+@NgModule({
+    declarations: [UiCustomMatMenuTriggerDirective],
+    exports: [UiCustomMatMenuTriggerDirective],
+})
+export class UiCustomMatMenuTriggerModule { }

projects/angular/directives/custom-mat-menu-trigger/src/public_api.ts

@@ -0,0 +1,2 @@
+export { UiCustomMatMenuTriggerModule } from './custom-mat-menu-trigger.module';
+export { UiCustomMatMenuTriggerDirective } from './custom-mat-menu-trigger.directive';

projects/angular/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "13.7.5",
+    "version": "13.7.6",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",

tsconfig.json

@@ -55,6 +55,9 @@
             "@uipath/angular/directives/ui-scroll-into-view": [
                 "projects/angular/directives/ui-scroll-into-view/src/public_api.ts"
             ],
+            "@uipath/angular/directives/custom-mat-menu-trigger": [
+                "projects/angular/directives/custom-mat-menu-trigger/src/public_api.ts"
+            ],
             "@uipath/angular/directives/ui-virtual-scroll-range-loader": [
                 "projects/angular/directives/ui-virtual-scroll-range-loader/src/public_api.ts"
             ],