From df0bb753242102710e7165bd3fcae93958f44799 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Tue, 3 Sep 2019 13:11:47 +0300
Subject: [PATCH] [ADF-4862] Upload dialog - reading order (#5045)

* dialog container accessibility

* upload container aria label translation key

* focus on active upload dialog

* test

* add back removed aria-label
---
 lib/content-services/i18n/en.json             |  1 +
 .../file-uploading-dialog.component.html      |  2 ++
 .../file-uploading-dialog.component.spec.ts   | 12 ++++++++++-
 .../file-uploading-dialog.component.ts        | 20 +++++++++++++++----
 4 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/lib/content-services/i18n/en.json b/lib/content-services/i18n/en.json
index 0e7a953c72..425721b080 100644
--- a/lib/content-services/i18n/en.json
+++ b/lib/content-services/i18n/en.json
@@ -131,6 +131,7 @@
     },
     "ARIA-LABEL": {
       "VERSION": "File version",
+      "DIALOG": "Upload list",
       "DIALOG_MAXIMIZE": "Maximize upload dialog",
       "DIALOG_MINIMIZE": "Minimize upload dialog",
       "DIALOG_CLOSE": "Close upload dialog",
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 de1bc831e5..002c2a4ff1 100644
--- a/lib/content-services/upload/components/file-uploading-dialog.component.html
+++ b/lib/content-services/upload/components/file-uploading-dialog.component.html
@@ -1,5 +1,7 @@
 <div *ngIf="isDialogActive"
      role="dialog"
+     [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG'| translate"
+     tabindex="0"
      class="adf-upload-dialog"
      id="upload-dialog"
      [class.adf-upload-dialog--minimized]="isDialogMinimized">
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 d20270fdb5..a7154c8ff3 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
@@ -16,7 +16,7 @@
  */
 
 import { EventEmitter } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import {
     FileModel, FileUploadCompleteEvent, FileUploadErrorEvent, UploadService, setupTestBed, CoreModule, AlfrescoApiService, AlfrescoApiServiceMock, UserPreferencesService
 } from '@alfresco/adf-core';
@@ -78,6 +78,16 @@ describe('FileUploadingDialogComponent', () => {
             expect(component.isDialogActive).toBe(true);
         });
 
+        it('should focus on dialog when uploading file', fakeAsync(() => {
+            uploadService.addToQueue(...fileList);
+            uploadService.uploadFilesInTheQueue(emitter);
+
+            fixture.detectChanges();
+            tick(100);
+
+            expect(document.activeElement.id).toBe('upload-dialog');
+        }));
+
         it('should update uploading file list', () => {
             uploadService.addToQueue(...fileList);
             uploadService.uploadFilesInTheQueue(emitter);
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 bab4cc839d..64d50274ed 100644
--- a/lib/content-services/upload/components/file-uploading-dialog.component.ts
+++ b/lib/content-services/upload/components/file-uploading-dialog.component.ts
@@ -16,11 +16,11 @@
  */
 
 import { FileModel, FileUploadStatus, UploadService, UserPreferencesService } from '@alfresco/adf-core';
-import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild, HostBinding } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnDestroy, OnInit, ViewChild, HostBinding, ElementRef } from '@angular/core';
 import { Subscription, merge, Subject } from 'rxjs';
 import { FileUploadingListComponent } from './file-uploading-list.component';
 import { Direction } from '@angular/cdk/bidi';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, delay } from 'rxjs/operators';
 
 @Component({
     selector: 'adf-file-uploading-dialog',
@@ -67,22 +67,34 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
     private counterSubscription: Subscription;
     private fileUploadSubscription: Subscription;
     private errorSubscription: Subscription;
+    private dialogActive = new Subject<boolean>();
 
     constructor(
         private uploadService: UploadService,
         private changeDetector: ChangeDetectorRef,
-        private userPreferencesService: UserPreferencesService
+        private userPreferencesService: UserPreferencesService,
+        private elementRef: ElementRef
         ) {
     }
 
     ngOnInit() {
+        this.dialogActive
+            .pipe(
+                delay(100),
+                takeUntil(this.onDestroy$)
+            )
+            .subscribe(() => {
+                this.elementRef.nativeElement.querySelector('#upload-dialog').focus();
+            });
+
         this.listSubscription = this.uploadService.queueChanged
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(fileList => {
                 this.filesUploadingList = fileList;
 
-                if (this.filesUploadingList.length) {
+                if (this.filesUploadingList.length && !this.isDialogActive) {
                     this.isDialogActive = true;
+                    this.dialogActive.next();
                 }
             });