[ACS-4252] Resolved accessibility issues around inherited permissions popover (#8222)

* [ACS-4252] Inherited permissions popover can now be opened and closed by enter key press. Added configurableFocusTrap to popover when it is opened.

* [ACS-4252] Removed console.log statement

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

@@ -44,7 +44,6 @@
                 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

@@ -23,7 +23,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 
 @Component({
     template: `
-        <div [adf-pop-over]="popOver" [autofocusedElementSelector]="'#test'" [target]="target" #target tabindex="0">
+        <div [adf-pop-over]="popOver" [autofocusedElementSelector]="'#test'" [target]="target" #target tabindex="0" [panelClass]="'adf-popover-test'">
         </div>
         <ng-template #popOver>
             <div id="test" tabindex="0"></div>
@@ -80,4 +80,28 @@ describe('PopOverDirective', () => {
         }));
         expect(popOverTrigger).not.toEqual(document.activeElement);
     });
+
+    it('should open pop over on enter key press if pop over is not open', () => {
+        const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
+        fixture.detectChanges();
+        popOverTrigger.dispatchEvent(new KeyboardEvent('keyup', {
+            key: 'Enter'
+        }));
+        fixture.detectChanges();
+        const popOverPanel = document.querySelector('.adf-popover-test');
+        expect(popOverPanel).toBeDefined();
+    });
+
+    it('should close pop over on enter key press if pop over is open', () => {
+        const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
+        fixture.detectChanges();
+        popOverTrigger.click();
+        fixture.detectChanges();
+        popOverTrigger.dispatchEvent(new KeyboardEvent('keyup', {
+            key: 'Enter'
+        }));
+        fixture.detectChanges();
+        const popOverPanel = document.querySelector('.adf-popover-test');
+        expect(popOverPanel).toBeNull();
+    });
 });

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

@@ -30,6 +30,7 @@ import { ConnectionPositionPair, Overlay, OverlayRef } from '@angular/cdk/overla
 import { TemplatePortal } from '@angular/cdk/portal';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
 
 @Directive({
     selector: '[adf-pop-over]',
@@ -50,10 +51,13 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
     private destroy$ = new Subject();
     private overlayRef!: OverlayRef;
 
+    private focusTrap: ConfigurableFocusTrap;
+
     constructor(
         private element: ElementRef,
         private overlay: Overlay,
-        private vcr: ViewContainerRef
+        private vcr: ViewContainerRef,
+        private focusTrapFactory: ConfigurableFocusTrapFactory
     ) { }
 
     ngOnInit(): void {
@@ -61,7 +65,7 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
     }
 
     ngAfterViewInit(): void {
-        this.element.nativeElement.addEventListener('click', () => this.attachOverlay());
+        this.element.nativeElement.addEventListener('click', () => this.toggleOverlay());
         this.element.nativeElement.addEventListener('keydown', this.preventDefaultForEnter);
     }
 
@@ -100,13 +104,27 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
     }
 
     @HostListener('keyup.enter')
+    private toggleOverlay(): void {
+        if (!this.overlayRef.hasAttached()) {
+            this.attachOverlay();
+        } else {
+            this.detachOverlay();
+        }
+    }
+
     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();
+            if (this.autofocusedElementSelector) {
+                this.overlayRef.overlayElement.querySelector<HTMLElement>(this.autofocusedElementSelector).focus();
+            }
+
+            if (this.popOver && !this.focusTrap) {
+                this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
+            }
         }
     }
 
@@ -115,6 +133,10 @@ export class PopOverDirective implements OnInit, OnDestroy, AfterViewInit {
         if (this.overlayRef.hasAttached()) {
             this.overlayRef.detach();
             this._open = false;
+
+            this.focusTrap.destroy();
+            this.focusTrap = null;
+
             this.element.nativeElement.focus();
         }
     }