Fixes for dynamic modal a11y (#518)

* Do not close modal if click finishes on background

* Trap tab focus in modals, use ESC to close modal

* Fix Angular change detection errors in modals

* Reset focus on next modal after closing modal

* Minor fixes and linting

* Attach focusTrap to modal-dialog element

* Change mousedown event back to click

* Make topModal private

* Add new div for dismissing modal by clicking bg

* Focus element in modal if no autoFocus directive

* Use backdrop for dismissal

* Fix typo

angular/src/components/modal/dynamic-modal.component.ts

@@ -10,6 +10,11 @@ import {
     ViewContainerRef
 } from '@angular/core';
 
+import {
+    ConfigurableFocusTrap,
+    ConfigurableFocusTrapFactory,
+} from '@angular/cdk/a11y';
+
 import { ModalService } from '../../services/modal.service';
 
 import { ModalRef } from './modal.ref';
@@ -26,8 +31,11 @@ export class DynamicModalComponent implements AfterViewInit, OnDestroy {
     childComponentType: Type<any>;
     setComponentParameters: (component: any) => void;
 
+    private focusTrap: ConfigurableFocusTrap;
+
     constructor(private modalService: ModalService, private cd: ChangeDetectorRef,
-        private el: ElementRef<HTMLElement>, public modalRef: ModalRef) {}
+        private el: ElementRef<HTMLElement>, private focusTrapFactory: ConfigurableFocusTrapFactory,
+        public modalRef: ModalRef) { }
 
     ngAfterViewInit() {
         this.loadChildComponent(this.childComponentType);
@@ -37,6 +45,10 @@ export class DynamicModalComponent implements AfterViewInit, OnDestroy {
         this.cd.detectChanges();
 
         this.modalRef.created(this.el.nativeElement);
+        this.focusTrap = this.focusTrapFactory.create(this.el.nativeElement.querySelector('.modal-dialog'));
+        if (this.el.nativeElement.querySelector('[appAutoFocus]') == null) {
+            this.focusTrap.focusFirstTabbableElementWhenReady();
+        }
     }
 
     loadChildComponent(componentType: Type<any>) {
@@ -50,9 +62,15 @@ export class DynamicModalComponent implements AfterViewInit, OnDestroy {
         if (this.componentRef) {
             this.componentRef.destroy();
         }
+        this.focusTrap.destroy();
     }
 
     close() {
         this.modalRef.close();
     }
+
+    getFocus() {
+        const autoFocusEl = this.el.nativeElement.querySelector('[appAutoFocus]') as HTMLElement;
+        autoFocusEl?.focus();
+    }
 }