[ACS-3781] 878751 function cannot be performed by keyboard alone hiding the user groups (#7980)

* ACS-3781 Focusing overlay and set off overlay on esc key

* ACS-3781 Remove listener for keydown on destroy

* ACS-3781 Added unit tests and use square brackets for property in html

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html

@@ -43,6 +43,7 @@
                 data-automation-id="permission-info-button"
                 [adf-pop-over]="inheritedPermission"
                 [target]="target"
+                [autofocusedElementSelector]="'.adf-sortable'"
                 #popOver="adfPopOver"
                 *ngIf="model.node.permissions.isInheritanceEnabled">
                 {{ (popOver.open ? 'PERMISSION_MANAGER.LABELS.HIDE' : 'PERMISSION_MANAGER.LABELS.SHOW') | translate }}

lib/content-services/src/lib/permission-manager/components/pop-over.directive.spec.ts

@@ -0,0 +1,83 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PopOverDirective } from '@alfresco/adf-content-services';
+import { By } from '@angular/platform-browser';
+import { OverlayModule } from '@angular/cdk/overlay';
+
+@Component({
+    template: `
+        <div [adf-pop-over]="popOver" [autofocusedElementSelector]="'#test'" [target]="target" #target tabindex="0">
+        </div>
+        <ng-template #popOver>
+            <div id="test" tabindex="0"></div>
+        </ng-template>
+    `
+})
+class PopOverTestComponent {}
+
+describe('PopOverDirective', () => {
+    let fixture: ComponentFixture<PopOverTestComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [OverlayModule],
+            declarations: [
+                PopOverDirective,
+                PopOverTestComponent
+            ]
+        });
+        fixture = TestBed.createComponent(PopOverTestComponent);
+    });
+
+    it('should focus element indicated by autofocusedElementSelector on pop over trigger click', () => {
+        const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
+        fixture.detectChanges();
+        popOverTrigger.click();
+        expect(fixture.debugElement.query(By.css('#test')).nativeElement).toBe(document.activeElement);
+    });
+
+    it('should focus element indicated by autofocusedElementSelector on pop over trigger enter keyup', () => {
+        const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
+        fixture.detectChanges();
+        popOverTrigger.dispatchEvent(new KeyboardEvent('keyup', {
+            key: 'Enter'
+        }));
+        expect(fixture.debugElement.query(By.css('#test')).nativeElement).toBe(document.activeElement);
+    });
+
+    it('should focus pop over trigger on document esc keyup if pop over is open', () => {
+        const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
+        fixture.detectChanges();
+        popOverTrigger.click();
+        document.dispatchEvent(new KeyboardEvent('keyup', {
+            key: 'Escape'
+        }));
+        expect(popOverTrigger).toBe(document.activeElement);
+    });
+
+    it('should not focus pop over trigger on document esc keyup if pop over is not open', () => {
+        const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
+        fixture.detectChanges();
+        document.dispatchEvent(new KeyboardEvent('keyup', {
+            key: 'Escape'
+        }));
+        expect(popOverTrigger).not.toEqual(document.activeElement);
+    });
+});

lib/content-services/src/lib/permission-manager/components/pop-over.directive.ts

@@ -15,7 +15,17 @@
  * limitations under the License.
  */
 
-import { AfterViewInit, Directive, ElementRef, Input, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import {
+    AfterViewInit,
+    Directive,
+    ElementRef,
+    HostListener,
+    Input,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewContainerRef
+} from '@angular/core';
 import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { takeUntil } from 'rxjs/operators';
@@ -34,6 +44,7 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
     @Input('adf-pop-over') popOver!: TemplateRef<any>;
     @Input() target!: HTMLElement;
     @Input() panelClass = 'adf-permission-pop-over';
+    @Input() autofocusedElementSelector: string;
 
     private _open = false;
     private destroy$ = new Subject();
@@ -51,9 +62,11 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
 
     ngAfterViewInit(): void {
         this.element.nativeElement.addEventListener('click', () => this.attachOverlay());
+        this.element.nativeElement.addEventListener('keydown', this.preventDefaultForEnter);
     }
 
     ngOnDestroy(): void {
+        this.element.nativeElement.removeEventListener('keydown', this.preventDefaultForEnter);
         this.detachOverlay();
         this.destroy$.next();
         this.destroy$.complete();
@@ -82,23 +95,33 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
             .backdropClick()
             .pipe(takeUntil(this.destroy$))
             .subscribe(() => {
-                this._open = false;
                 this.detachOverlay();
             });
     }
 
+    @HostListener('keyup.enter')
     private attachOverlay(): void {
         if (!this.overlayRef.hasAttached()) {
             const periodSelectorPortal = new TemplatePortal(this.popOver, this.vcr);
 
             this.overlayRef.attach(periodSelectorPortal);
             this._open = true;
+            this.overlayRef.overlayElement.querySelector<HTMLElement>(this.autofocusedElementSelector).focus();
         }
     }
 
+    @HostListener('document:keyup.esc')
     private detachOverlay(): void {
         if (this.overlayRef.hasAttached()) {
             this.overlayRef.detach();
+            this._open = false;
+            this.element.nativeElement.focus();
+        }
+    }
+
+    private preventDefaultForEnter(event: KeyboardEvent): void {
+        if (event.key === 'Enter') {
+            event.preventDefault();
         }
     }
 }