[ACS-9266] Make notification and user menu accessible with keyboard (#4394)

* [ACS-9266] Make notification and user menu accessible with keyboard

* [ACS-9266] cr fixes

* [ACS-9266] cr fix

* [link-adf:dev-mmaliarchuk/ACS-9266-Notification-and-user-menu-are-not-accessible-with-keyboard][ci:force]

* empty commit

projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.spec.ts

@@ -27,11 +27,14 @@ import { ToolbarMenuItemComponent } from './toolbar-menu-item.component';
 import { AppExtensionService } from '../../../services/app.extension.service';
 import { Store } from '@ngrx/store';
 import { of } from 'rxjs';
-import { ContentActionRef, ContentActionType } from '@alfresco/adf-extensions';
+import { ContentActionRef, ContentActionType, DynamicExtensionComponent } from '@alfresco/adf-extensions';
 import { LibTestingModule } from '@alfresco/aca-shared';
+import { MatMenuItem } from '@angular/material/menu';
+import { UnitTestingUtils } from '@alfresco/adf-core';
 
 describe('ToolbarMenuItemComponent', () => {
   let fixture: ComponentFixture<ToolbarMenuItemComponent>;
+  let testingUtils: UnitTestingUtils;
   let component: ToolbarMenuItemComponent;
   let appExtensionService: AppExtensionService;
 
@@ -51,6 +54,7 @@ describe('ToolbarMenuItemComponent', () => {
     });
 
     fixture = TestBed.createComponent(ToolbarMenuItemComponent);
+    testingUtils = new UnitTestingUtils(fixture.debugElement);
     component = fixture.componentInstance;
     appExtensionService = TestBed.inject(AppExtensionService);
   });
@@ -110,4 +114,17 @@ describe('ToolbarMenuItemComponent', () => {
 
     expect(component.trackByActionId(0, contentActionRef)).toBe('action1');
   });
+
+  it('should assign menuItem from dynamic component', () => {
+    component.actionRef = {
+      id: 'action1',
+      type: ContentActionType.custom
+    };
+    fixture.detectChanges();
+
+    const innerElement = testingUtils.getByDirective(DynamicExtensionComponent);
+    innerElement.componentInstance.menuItem = new MatMenuItem(null, null, null, null, null);
+    component.ngAfterViewInit();
+    expect(component.menuItem).toBeInstanceOf(MatMenuItem);
+  });
 });

projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.ts

@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ContentActionRef, DynamicExtensionComponent } from '@alfresco/adf-extensions';
 import { AppExtensionService } from '../../../services/app.extension.service';
 import { MatMenuItem, MatMenuModule } from '@angular/material/menu';
@@ -40,7 +40,7 @@ import { IconComponent } from '@alfresco/adf-core';
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-toolbar-menu-item' }
 })
-export class ToolbarMenuItemComponent {
+export class ToolbarMenuItemComponent implements AfterViewInit {
   @Input()
   actionRef: ContentActionRef;
   @Input()
@@ -49,6 +49,9 @@ export class ToolbarMenuItemComponent {
   @ViewChild(MatMenuItem)
   menuItem: MatMenuItem;
 
+  @ViewChild(DynamicExtensionComponent)
+  dynamicComponent: DynamicExtensionComponent;
+
   constructor(private extensions: AppExtensionService) {}
 
   runAction() {
@@ -64,6 +67,12 @@ export class ToolbarMenuItemComponent {
     }
   }
 
+  ngAfterViewInit() {
+    if (this.dynamicComponent?.menuItem) {
+      this.menuItem = this.dynamicComponent.menuItem;
+    }
+  }
+
   private hasClickAction(actionRef: ContentActionRef): boolean {
     return !!actionRef?.actions?.click;
   }