inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

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

@ -130,7 +130,15 @@
} }
}, },
"ARIA-LABEL": { "ARIA-LABEL": {
"VERSION": "File version" "VERSION": "File version",
"DIALOG_MAXIMIZE": "Maximize upload dialog",
"DIALOG_MINIMIZE": "Minimize upload dialog",
"DIALOG_CLOSE": "Close upload dialog",
"CANCEL_ALL": "Cancel all uploading files",
"CONFIRMATION": {
"CANCEL": "Confirm cancel",
"CONTINUE": "Continue uploading"
}
} }
}, },
"FILE_UPLOAD": { "FILE_UPLOAD": {

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

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