[ADF-4855] Upload dialog - Buttons must have discernible text (#5040)

* aria labels translation keys

* actions aria label

* announce confirmation content
This commit is contained in:
Cilibiu Bogdan
2019-09-02 14:45:08 +03:00
committed by Eugenio Romano
parent 27c36ad4a2
commit ddb5fb445c
2 changed files with 22 additions and 4 deletions

View File

@@ -1,10 +1,14 @@
<div *ngIf="isDialogActive"
role="dialog"
class="adf-upload-dialog"
id="upload-dialog"
[class.adf-upload-dialog--minimized]="isDialogMinimized">
<header class="adf-upload-dialog__header">
<button
mat-button
[attr.aria-label]="(isDialogMinimized ?
'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MAXIMIZE':
'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MINIMIZE') | translate"
color="secondary"
[disabled]="isConfirmation"
[attr.aria-expanded]="!isDialogMinimized"
@@ -60,13 +64,15 @@
</adf-file-uploading-list>
<div
aria-live="polite"
aria-labelledby="confirmationTitle"
aria-describedby="confirmationDescription"
class="adf-upload-dialog__confirmation"
[class.adf-upload-dialog--hide]="!isConfirmation">
<p class="adf-upload-dialog__confirmation--title">
<p role="heading" id="confirmationTitle" class="adf-upload-dialog__confirmation--title">
{{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }}
</p>
<p class="adf-upload-dialog__confirmation--text">
<p id="confirmationDescription" class="adf-upload-dialog__confirmation--text">
{{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TEXT' | translate }}
</p>
</div>
@@ -76,6 +82,7 @@
*ngIf="!isConfirmation">
<button
id="adf-upload-dialog-cancel-all"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CANCEL_ALL' | translate"
color="primary"
mat-button
*ngIf="!uploadList.isUploadCompleted() && !uploadList.isUploadCancelled()"
@@ -85,6 +92,7 @@
<button
id="adf-upload-dialog-close"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_CLOSE' | translate"
*ngIf="uploadList.isUploadCompleted() || uploadList.isUploadCancelled()"
mat-button
color="primary"
@@ -97,6 +105,7 @@
*ngIf="isConfirmation">
<button
id="adf-upload-dialog-cancel"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CANCEL' | translate"
color="secondary"
mat-button
(click)="cancelAllUploads()">
@@ -105,6 +114,7 @@
<button
id="adf-upload-dialog-confirm"
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.CONFIRMATION.CONTINUE' | translate"
mat-button
color="primary"
(click)="toggleConfirmation()">