Merge pull request #313 from UiPath/fix/aria-expanded

Fix(grid): make trigger menu button accessible

Author: CatalinB7

CHANGELOG.md

@@ -1,3 +1,10 @@
+# v14.5.4 (2023-03-08)
+* **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
+
 # v14.5.3 (2023-03-03)
 * **grid** add test for tooltip on focus
 * **grid** display title & description tooltip on focus

package-lock.json

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

package.json

@@ -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/a11y/src/queued-announcer/queued-announcer.ts

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

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

@@ -1091,6 +1091,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.component.spec.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.intl.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';
 
@@ -52,6 +53,7 @@ import { UiGridComponent } from './ui-grid.component';
         UiVirtualScrollViewportResizeModule,
         UiAutoAccessibleLabelModule,
         UiNgLetModule,
+        UiCustomMatMenuTriggerModule,
     ],
     declarations: [
         UiGridComponent,

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

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

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

@@ -0,0 +1,69 @@
+import {
+    Subject,
+    takeUntil,
+} from 'rxjs';
+
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import {
+    AfterContentInit,
+    Directive,
+    ElementRef,
+    HostBinding,
+    inject,
+    Input,
+    OnDestroy,
+} from '@angular/core';
+import { _MatMenuTriggerBase } from '@angular/material/menu';
+
+//  FIXME: this directive will not be necessary anymore in the @angular/[email protected] version
+// its sole purpose is to fix the aria-expanded issue https://github.com/angular/components/issues/26262
+
+@Directive({
+    selector: '[uiCustomMatMenuTriggerFor]',
+})
+export class UiCustomMatMenuTriggerDirective extends _MatMenuTriggerBase implements AfterContentInit, OnDestroy {
+    @HostBinding()
+    ariaExpanded = false;
+
+    @Input()
+    expandedTranslation = 'expanded';
+
+    nativeElement = inject(ElementRef<HTMLElement>).nativeElement;
+
+    private _liveAnnouncer = inject(LiveAnnouncer);
+    private _destroyed$ = new Subject<void>();
+    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();
+    }
+}
+