action icons accessibility

This commit is contained in:
pionnegru 2019-10-11 08:31:44 +03:00
parent 5deb24ad16
commit a1224d2f72
6 changed files with 25 additions and 5 deletions

View File

@ -35,10 +35,18 @@ import {
@Component({
selector: 'app-document-display-mode',
template: `
<button mat-icon-button color="primary" (click)="onClick()">
<mat-icon *ngIf="(displayMode$ | async) === 'list'">view_comfy</mat-icon>
<mat-icon *ngIf="(displayMode$ | async) === 'gallery'">list</mat-icon>
</button>
<ng-container *ngIf="displayMode$ | async as displayMode">
<button
[attr.title]="getTitle(displayMode) | translate"
[attr.aria-label]="getTitle(displayMode) | translate"
mat-icon-button
color="primary"
(click)="onClick()"
>
<mat-icon *ngIf="displayMode === 'list'">view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
</button>
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
host: { class: 'app-document-display-mode' }
@ -50,6 +58,12 @@ export class DocumentDisplayModeComponent {
this.displayMode$ = store.select(getDocumentDisplayMode);
}
getTitle(displayMode: string): string {
return displayMode === 'list'
? 'APP.ACTIONS.LIST_MODE'
: 'APP.ACTIONS.GALLERY_MODE';
}
onClick() {
this.store.dispatch(new ToggleDocumentDisplayMode());
}

View File

@ -37,6 +37,7 @@ import {
<button
mat-icon-button
[color]="(infoDrawerOpened$ | async) ? 'primary' : ''"
[attr.aria-label]="'APP.ACTIONS.DETAILS' | translate"
[attr.title]="'APP.ACTIONS.DETAILS' | translate"
(click)="onClick()"
>

View File

@ -4,6 +4,7 @@
[id]="actionRef.id"
mat-icon-button
[color]="color"
[attr.aria-label]="actionRef.description || actionRef.title | translate"
[attr.title]="actionRef.description || actionRef.title | translate"
(click)="runAction()"
>

View File

@ -2,6 +2,7 @@
[id]="actionRef.id"
[color]="color"
mat-icon-button
[attr.aria-label]="actionRef.description || actionRef.title | translate"
[attr.title]="actionRef.description || actionRef.title | translate"
[matMenuTriggerFor]="menu"
>

View File

@ -40,6 +40,7 @@ import { SharedLinkEntry } from '@alfresco/js-api';
<button
*ngIf="data.iconButton"
mat-icon-button
[attr.aria-label]="data.title | translate"
[attr.title]="data.title | translate"
(click)="onClick()"
>

View File

@ -211,7 +211,9 @@
"CANCEL_JOIN": "Cancel Join Request",
"LEAVE": "Leave Library",
"EDIT_OFFLINE": "Edit Offline",
"EDIT_OFFLINE_CANCEL": "Cancel Editing"
"EDIT_OFFLINE_CANCEL": "Cancel Editing",
"LIST_MODE": "View list",
"GALLERY_MODE": "View gallery"
},
"DIALOGS": {
"CONFIRM_PURGE": {