From 1d7ef6209592e8703cdbaf48d4340d141fa461a5 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Mon, 14 Oct 2019 13:18:17 +0300
Subject: [PATCH] [ADF-4953] Uploader - confirmation dialog actions should
 return focus to the upload dialog (#5148)

* trap confirmation dialog

* focus dialog when not in confirmation state

* test
---
 .../file-uploading-dialog.component.html      |  2 +-
 .../file-uploading-dialog.component.spec.ts   | 20 +++++++++++++++++++
 .../file-uploading-dialog.component.ts        |  6 +++++-
 lib/content-services/upload/upload.module.ts  |  4 +++-
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/lib/content-services/upload/components/file-uploading-dialog.component.html b/lib/content-services/upload/components/file-uploading-dialog.component.html
index cd0b6d9f8d..b392012084 100644
--- a/lib/content-services/upload/components/file-uploading-dialog.component.html
+++ b/lib/content-services/upload/components/file-uploading-dialog.component.html
@@ -107,7 +107,7 @@
     </footer>
 
     <footer class="adf-upload-dialog__actions"
-            *ngIf="isConfirmation">
+            *ngIf="isConfirmation" cdkTrapFocus cdkTrapFocusAutoCapture>
         <button
             id="adf-upload-dialog-cancel"
             [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CANCEL' | translate"
diff --git a/lib/content-services/upload/components/file-uploading-dialog.component.spec.ts b/lib/content-services/upload/components/file-uploading-dialog.component.spec.ts
index 587ec342e4..5107cfb4b9 100644
--- a/lib/content-services/upload/components/file-uploading-dialog.component.spec.ts
+++ b/lib/content-services/upload/components/file-uploading-dialog.component.spec.ts
@@ -164,6 +164,26 @@ describe('FileUploadingDialogComponent', () => {
 
             expect(component.isDialogMinimized).toBe(false);
         });
+
+        it('should focus on dialog when coming from confirmation', fakeAsync(() => {
+            uploadService.addToQueue(...fileList);
+            uploadService.uploadFilesInTheQueue(emitter);
+
+            fixture.detectChanges();
+            tick(100);
+
+            component.toggleConfirmation();
+            fixture.detectChanges();
+            tick(100);
+
+            expect(document.activeElement.id).not.toBe('upload-dialog');
+
+            component.toggleConfirmation();
+            fixture.detectChanges();
+            tick(100);
+
+            expect(document.activeElement.id).toBe('upload-dialog');
+        }));
     });
 
     describe('cancelAllUploads()', () => {
diff --git a/lib/content-services/upload/components/file-uploading-dialog.component.ts b/lib/content-services/upload/components/file-uploading-dialog.component.ts
index aea94b8e1d..d3c1717852 100644
--- a/lib/content-services/upload/components/file-uploading-dialog.component.ts
+++ b/lib/content-services/upload/components/file-uploading-dialog.component.ts
@@ -153,6 +153,10 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
     toggleConfirmation() {
         this.isConfirmation = !this.isConfirmation;
 
+        if (!this.isConfirmation) {
+            this.dialogActive.next();
+        }
+
         if (this.isDialogMinimized) {
             this.isDialogMinimized = false;
         }
@@ -163,7 +167,7 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
      */
     cancelAllUploads() {
         this.toggleConfirmation();
-
+        this.dialogActive.next();
         this.uploadList.cancelAllFiles();
     }
 
diff --git a/lib/content-services/upload/upload.module.ts b/lib/content-services/upload/upload.module.ts
index 75e446a5e0..ca5cd64456 100644
--- a/lib/content-services/upload/upload.module.ts
+++ b/lib/content-services/upload/upload.module.ts
@@ -28,12 +28,14 @@ import { FileUploadErrorPipe } from './pipes/file-upload-error.pipe';
 import { CoreModule } from '@alfresco/adf-core';
 import { FileDraggableDirective } from './directives/file-draggable.directive';
 import { ToggleIconDirective } from './directives/toggle-icon.directive';
+import { A11yModule } from '@angular/cdk/a11y';
 
 @NgModule({
     imports: [
         CoreModule.forChild(),
         CommonModule,
-        MaterialModule
+        MaterialModule,
+        A11yModule
     ],
     declarations: [
         FileDraggableDirective,