[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
This commit is contained in:
Cilibiu Bogdan
2019-09-03 13:11:47 +03:00
committed by Eugenio Romano
parent 19a17ca6e6
commit df0bb75324
4 changed files with 30 additions and 5 deletions

View File

@@ -131,6 +131,7 @@
}, },
"ARIA-LABEL": { "ARIA-LABEL": {
"VERSION": "File version", "VERSION": "File version",
"DIALOG": "Upload list",
"DIALOG_MAXIMIZE": "Maximize upload dialog", "DIALOG_MAXIMIZE": "Maximize upload dialog",
"DIALOG_MINIMIZE": "Minimize upload dialog", "DIALOG_MINIMIZE": "Minimize upload dialog",
"DIALOG_CLOSE": "Close upload dialog", "DIALOG_CLOSE": "Close upload dialog",

View File

@@ -1,5 +1,7 @@
<div *ngIf="isDialogActive" <div *ngIf="isDialogActive"
role="dialog" role="dialog"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG'| translate"
tabindex="0"
class="adf-upload-dialog" class="adf-upload-dialog"
id="upload-dialog" id="upload-dialog"
[class.adf-upload-dialog--minimized]="isDialogMinimized"> [class.adf-upload-dialog--minimized]="isDialogMinimized">

View File

@@ -16,7 +16,7 @@
*/ */
import { EventEmitter } from '@angular/core'; import { EventEmitter } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing'; import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { import {
FileModel, FileUploadCompleteEvent, FileUploadErrorEvent, UploadService, setupTestBed, CoreModule, AlfrescoApiService, AlfrescoApiServiceMock, UserPreferencesService FileModel, FileUploadCompleteEvent, FileUploadErrorEvent, UploadService, setupTestBed, CoreModule, AlfrescoApiService, AlfrescoApiServiceMock, UserPreferencesService
} from '@alfresco/adf-core'; } from '@alfresco/adf-core';
@@ -78,6 +78,16 @@ describe('FileUploadingDialogComponent', () => {
expect(component.isDialogActive).toBe(true); 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', () => { it('should update uploading file list', () => {
uploadService.addToQueue(...fileList); uploadService.addToQueue(...fileList);
uploadService.uploadFilesInTheQueue(emitter); uploadService.uploadFilesInTheQueue(emitter);

View File

@@ -16,11 +16,11 @@
*/ */
import { FileModel, FileUploadStatus, UploadService, UserPreferencesService } from '@alfresco/adf-core'; 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 { Subscription, merge, Subject } from 'rxjs';
import { FileUploadingListComponent } from './file-uploading-list.component'; import { FileUploadingListComponent } from './file-uploading-list.component';
import { Direction } from '@angular/cdk/bidi'; import { Direction } from '@angular/cdk/bidi';
import { takeUntil } from 'rxjs/operators'; import { takeUntil, delay } from 'rxjs/operators';
@Component({ @Component({
selector: 'adf-file-uploading-dialog', selector: 'adf-file-uploading-dialog',
@@ -67,22 +67,34 @@ export class FileUploadingDialogComponent implements OnInit, OnDestroy {
private counterSubscription: Subscription; private counterSubscription: Subscription;
private fileUploadSubscription: Subscription; private fileUploadSubscription: Subscription;
private errorSubscription: Subscription; private errorSubscription: Subscription;
private dialogActive = new Subject<boolean>();
constructor( constructor(
private uploadService: UploadService, private uploadService: UploadService,
private changeDetector: ChangeDetectorRef, private changeDetector: ChangeDetectorRef,
private userPreferencesService: UserPreferencesService private userPreferencesService: UserPreferencesService,
private elementRef: ElementRef
) { ) {
} }
ngOnInit() { ngOnInit() {
this.dialogActive
.pipe(
delay(100),
takeUntil(this.onDestroy$)
)
.subscribe(() => {
this.elementRef.nativeElement.querySelector('#upload-dialog').focus();
});
this.listSubscription = this.uploadService.queueChanged this.listSubscription = this.uploadService.queueChanged
.pipe(takeUntil(this.onDestroy$)) .pipe(takeUntil(this.onDestroy$))
.subscribe(fileList => { .subscribe(fileList => {
this.filesUploadingList = fileList; this.filesUploadingList = fileList;
if (this.filesUploadingList.length) { if (this.filesUploadingList.length && !this.isDialogActive) {
this.isDialogActive = true; this.isDialogActive = true;
this.dialogActive.next();
} }
}); });