Merge pull request #1249 from Alfresco/dev-pionnegru-ACA-2623

[ACA-2623] InfoDrawer toolbar action - focus InfoDrawer

src/app/components/info-drawer/info-drawer.component.html

@@ -2,7 +2,11 @@
   <mat-progress-bar mode="indeterminate"></mat-progress-bar>
 </div>
 <ng-container *ngIf="!isLoading && !!displayNode">
-  <adf-info-drawer [title]="'APP.INFO_DRAWER.TITLE'">
+  <adf-info-drawer
+    [title]="'APP.INFO_DRAWER.TITLE'"
+    cdkTrapFocus
+    cdkTrapFocusAutoCapture
+  >
     <adf-info-drawer-tab
       *ngFor="let tab of tabs"
       [icon]="tab.icon"

src/app/components/info-drawer/info-drawer.component.spec.ts

@@ -26,7 +26,10 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { InfoDrawerComponent } from './info-drawer.component';
 import { TestBed, ComponentFixture, async } from '@angular/core/testing';
 import { Store } from '@ngrx/store';
-import { SetInfoDrawerStateAction } from '@alfresco/aca-shared/store';
+import {
+  SetInfoDrawerStateAction,
+  ToggleInfoDrawerAction
+} from '@alfresco/aca-shared/store';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { AppExtensionService } from '../../extensions/extension.service';
 import { ContentApiService } from '@alfresco/aca-shared';
@@ -147,4 +150,20 @@ describe('InfoDrawerComponent', () => {
     expect(component.displayNode).toBe(response);
     expect(contentApiService.getNodeInfo).toHaveBeenCalled();
   }));
+
+  it('should dispatch close panel on Esc keyboard event', () => {
+    const event = new KeyboardEvent('keydown', {
+      code: 'Escape',
+      key: 'Escape',
+      keyCode: 27
+    } as KeyboardEventInit);
+
+    fixture.detectChanges();
+
+    fixture.debugElement.nativeElement.dispatchEvent(event);
+
+    expect(storeMock.dispatch).toHaveBeenCalledWith(
+      new ToggleInfoDrawerAction()
+    );
+  });
 });

src/app/components/info-drawer/info-drawer.component.ts

@@ -23,7 +23,14 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnChanges, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  HostListener,
+  Input,
+  OnChanges,
+  OnInit,
+  OnDestroy
+} from '@angular/core';
 import {
   MinimalNodeEntity,
   MinimalNodeEntryEntity,
@@ -33,7 +40,10 @@ import { ContentApiService } from '@alfresco/aca-shared';
 import { AppExtensionService } from '../../extensions/extension.service';
 import { SidebarTabRef } from '@alfresco/adf-extensions';
 import { Store } from '@ngrx/store';
-import { SetInfoDrawerStateAction } from '@alfresco/aca-shared/store';
+import {
+  SetInfoDrawerStateAction,
+  ToggleInfoDrawerAction
+} from '@alfresco/aca-shared/store';
 
 @Component({
   selector: 'aca-info-drawer',
@@ -49,6 +59,11 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
   displayNode: MinimalNodeEntryEntity | SiteEntry;
   tabs: Array<SidebarTabRef> = [];
 
+  @HostListener('keydown.escape', ['$event'])
+  onEscapeKeyboardEvent(event: KeyboardEvent): void {
+    this.close();
+  }
+
   constructor(
     private store: Store<any>,
     private contentApi: ContentApiService,
@@ -76,6 +91,10 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
     }
   }
 
+  private close() {
+    this.store.dispatch(new ToggleInfoDrawerAction());
+  }
+
   private loadNodeInfo(nodeId: string) {
     if (nodeId) {
       this.isLoading = true;

src/app/components/info-drawer/info.drawer.module.ts

@@ -39,6 +39,7 @@ import { MetadataTabComponent } from './metadata-tab/metadata-tab.component';
 import { LibraryMetadataTabComponent } from './library-metadata-tab/library-metadata-tab.component';
 import { LibraryMetadataFormComponent } from './library-metadata-tab/library-metadata-form.component';
 import { VersionsTabComponent } from './versions-tab/versions-tab.component';
+import { A11yModule } from '@angular/cdk/a11y';
 
 export function components() {
   return [
@@ -59,7 +60,8 @@ export function components() {
     ExtensionsModule,
     ContentMetadataModule,
     VersionManagerModule,
-    DirectivesModule
+    DirectivesModule,
+    A11yModule
   ],
   declarations: [...components()],
   exports: [...components()],