From 1d4f552ae62474a84f80c3a6456293be44ea0ce1 Mon Sep 17 00:00:00 2001
From: Catalin <catalin.bajenaru@uipath.com>
Date: Tue, 7 Mar 2023 20:24:06 +0200
Subject: [PATCH 1/6] feat(a11y): add menu-trigger directive that sets
 aria-expanded

---
 .../custom-mat-menu-trigger/ng-package.json   |  1 +
 .../src/custom-mat-menu-trigger.directive.ts  | 68 +++++++++++++++++++
 .../src/custom-mat-menu-trigger.module.ts     |  9 +++
 .../custom-mat-menu-trigger/src/public_api.ts |  2 +
 tsconfig.json                                 |  3 +
 5 files changed, 83 insertions(+)
 create mode 100644 projects/angular/directives/custom-mat-menu-trigger/ng-package.json
 create mode 100644 projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
 create mode 100644 projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.module.ts
 create mode 100644 projects/angular/directives/custom-mat-menu-trigger/src/public_api.ts

diff --git a/projects/angular/directives/custom-mat-menu-trigger/ng-package.json b/projects/angular/directives/custom-mat-menu-trigger/ng-package.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/projects/angular/directives/custom-mat-menu-trigger/ng-package.json
@@ -0,0 +1 @@
+{}
diff --git a/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts b/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
new file mode 100644
index 000000000..ea18224fc
--- /dev/null
+++ b/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
@@ -0,0 +1,68 @@
+import {
+    Subject,
+    takeUntil,
+} from 'rxjs';
+
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import {
+    AfterContentInit,
+    Directive,
+    HostBinding,
+    inject,
+    Input,
+    OnDestroy,
+} from '@angular/core';
+import { _MatMenuTriggerBase } from '@angular/material/menu';
+
+@Directive({
+    selector: '[uiCustomMatMenuTriggerFor]',
+})
+export class UiCustomMatMenuTriggerDirective extends _MatMenuTriggerBase implements AfterContentInit, OnDestroy {
+    @HostBinding()
+    ariaExpanded = false;
+
+    @Input()
+    expandedTranslation = 'expanded';
+
+    get nativeElement() {
+        // eslint-disable-next-line no-underscore-dangle
+        return (this as any)._element.nativeElement as HTMLElement;
+    }
+
+    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();
+    }
+}
+
diff --git a/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.module.ts b/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.module.ts
new file mode 100644
index 000000000..fa31c706a
--- /dev/null
+++ b/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 { }
diff --git a/projects/angular/directives/custom-mat-menu-trigger/src/public_api.ts b/projects/angular/directives/custom-mat-menu-trigger/src/public_api.ts
new file mode 100644
index 000000000..fda813e9c
--- /dev/null
+++ b/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';
diff --git a/tsconfig.json b/tsconfig.json
index 93d684c1e..63e595377 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -55,6 +55,9 @@
             "@uipath/angular/directives/keyboard-shortcut": [
                 "projects/angular/directives/keyboard-shortcut/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-autofocus": [
                 "projects/angular/directives/ui-autofocus/src/public_api.ts"
             ],

From b784f903fcf8164e5023e5b63e3c8e8fd16f75fe Mon Sep 17 00:00:00 2001
From: Catalin <catalin.bajenaru@uipath.com>
Date: Tue, 7 Mar 2023 22:44:05 +0200
Subject: [PATCH 2/6] fix(a11y): filter messages that are announced

---
 projects/angular/a11y/src/queued-announcer/queued-announcer.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/projects/angular/a11y/src/queued-announcer/queued-announcer.ts b/projects/angular/a11y/src/queued-announcer/queued-announcer.ts
index c6a12082b..dfda45bd6 100644
--- a/projects/angular/a11y/src/queued-announcer/queued-announcer.ts
+++ b/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) {

From 6adb26416556a4dca9cd878e1a900c1dfe92a7d6 Mon Sep 17 00:00:00 2001
From: Catalin <catalin.bajenaru@uipath.com>
Date: Tue, 7 Mar 2023 22:45:39 +0200
Subject: [PATCH 3/6] fix(grid): announce filter menu state collapsed/expanded

---
 .../angular/components/ui-grid/src/ui-grid.component.html   | 2 ++
 projects/angular/components/ui-grid/src/ui-grid.intl.ts     | 5 +++++
 projects/angular/components/ui-grid/src/ui-grid.module.ts   | 2 ++
 .../src/custom-mat-menu-trigger.directive.ts                | 6 ++----
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.html b/projects/angular/components/ui-grid/src/ui-grid.component.html
index 4779d4b68..01b1fca19 100644
--- a/projects/angular/components/ui-grid/src/ui-grid.component.html
+++ b/projects/angular/components/ui-grid/src/ui-grid.component.html
@@ -630,6 +630,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">
diff --git a/projects/angular/components/ui-grid/src/ui-grid.intl.ts b/projects/angular/components/ui-grid/src/ui-grid.intl.ts
index 0976ba945..e3e3c018f 100644
--- a/projects/angular/components/ui-grid/src/ui-grid.intl.ts
+++ b/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.
      *
diff --git a/projects/angular/components/ui-grid/src/ui-grid.module.ts b/projects/angular/components/ui-grid/src/ui-grid.module.ts
index 9497c30ce..59bad8556 100644
--- a/projects/angular/components/ui-grid/src/ui-grid.module.ts
+++ b/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';
 
@@ -52,6 +53,7 @@ import { UiGridComponent } from './ui-grid.component';
         UiVirtualScrollViewportResizeModule,
         UiAutoAccessibleLabelModule,
         UiNgLetModule,
+        UiCustomMatMenuTriggerModule,
     ],
     declarations: [
         UiGridComponent,
diff --git a/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts b/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
index ea18224fc..6fdaeb3cc 100644
--- a/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
+++ b/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
@@ -7,6 +7,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y';
 import {
     AfterContentInit,
     Directive,
+    ElementRef,
     HostBinding,
     inject,
     Input,
@@ -24,10 +25,7 @@ export class UiCustomMatMenuTriggerDirective extends _MatMenuTriggerBase impleme
     @Input()
     expandedTranslation = 'expanded';
 
-    get nativeElement() {
-        // eslint-disable-next-line no-underscore-dangle
-        return (this as any)._element.nativeElement as HTMLElement;
-    }
+    nativeElement = inject(ElementRef<HTMLElement>).nativeElement;
 
     private _liveAnnouncer = inject(LiveAnnouncer);
     private _destroyed$ = new Subject<void>();

From c722f74f8a8af482fa3787696a1f3834c1f9226c Mon Sep 17 00:00:00 2001
From: Catalin <catalin.bajenaru@uipath.com>
Date: Tue, 7 Mar 2023 22:56:08 +0200
Subject: [PATCH 4/6] fix(grid): add tick to test

---
 .../angular/components/ui-grid/src/ui-grid.component.spec.ts    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts b/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts
index 95af57672..a490bc12c 100644
--- a/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts
+++ b/projects/angular/components/ui-grid/src/ui-grid.component.spec.ts
@@ -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', () => {

From 34ccc336e3f93ff42fd17332fa19350980937bd0 Mon Sep 17 00:00:00 2001
From: Catalin <catalin.bajenaru@uipath.com>
Date: Wed, 8 Mar 2023 12:33:53 +0200
Subject: [PATCH 5/6] fix(grid): add aria-expanded to filters btn

---
 projects/angular/components/ui-grid/src/ui-grid.component.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/angular/components/ui-grid/src/ui-grid.component.html b/projects/angular/components/ui-grid/src/ui-grid.component.html
index 01b1fca19..7f69b0e20 100644
--- a/projects/angular/components/ui-grid/src/ui-grid.component.html
+++ b/projects/angular/components/ui-grid/src/ui-grid.component.html
@@ -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">

From 80f3612a322cdb2ece95aeaa75aeefabb68e8459 Mon Sep 17 00:00:00 2001
From: Catalin <catalin.bajenaru@uipath.com>
Date: Wed, 8 Mar 2023 12:48:37 +0200
Subject: [PATCH 6/6] chore: bump version

---
 CHANGELOG.md                                               | 7 +++++++
 package-lock.json                                          | 4 ++--
 package.json                                               | 2 +-
 .../src/custom-mat-menu-trigger.directive.ts               | 3 +++
 projects/angular/package.json                              | 2 +-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 17d6743f2..21ed91075 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 1c44d6b27..1d763a1fd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "angular-components",
-  "version": "14.5.3",
+  "version": "14.5.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "angular-components",
-      "version": "14.5.3",
+      "version": "14.5.4",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "14.2.12",
diff --git a/package.json b/package.json
index 1027c55e2..a40207c5e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "14.5.3",
+  "version": "14.5.4",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"
diff --git a/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts b/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
index 6fdaeb3cc..dafb98fae 100644
--- a/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
+++ b/projects/angular/directives/custom-mat-menu-trigger/src/custom-mat-menu-trigger.directive.ts
@@ -15,6 +15,9 @@ import {
 } from '@angular/core';
 import { _MatMenuTriggerBase } from '@angular/material/menu';
 
+//  FIXME: this directive will not be necessary anymore in the @angular/material@15.x version
+// its sole purpose is to fix the aria-expanded issue https://github.com/angular/components/issues/26262
+
 @Directive({
     selector: '[uiCustomMatMenuTriggerFor]',
 })
diff --git a/projects/angular/package.json b/projects/angular/package.json
index 3352273f2..0f1bde448 100644
--- a/projects/angular/package.json
+++ b/projects/angular/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "14.5.3",
+    "version": "14.5.4",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",