inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4862] Upload dialog - reading order (#5045)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/content-services/i18n/en.json
View File

@@ -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",

2
lib/content-services/upload/components/file-uploading-dialog.component.html
View File

@@ -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">

12
lib/content-services/upload/components/file-uploading-dialog.component.spec.ts
View File

@@ -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);

20
lib/content-services/upload/components/file-uploading-dialog.component.ts
View File

@@ -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();
}
});