inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-2566][ACA-2567] permissions a11y fixes (#5560)

Browse Source 
* fix layout and a11y, cleanup html

* fix sorting announcer

* fix i18n issue for Actions column
This commit is contained in:
Denys Vuika 2020-03-19 16:47:24 +00:00 committed by GitHub
parent a04abd0041
commit fc6a80c45a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
View File

@ -12,19 +12,28 @@
<adf-datatable [rows]="permissionList" class="adf-datatable-permission" *ngIf="permissionList && permissionList.length"> <adf-datatable [rows]="permissionList" class="adf-datatable-permission" *ngIf="permissionList && permissionList.length">
<data-columns> <data-columns>
<data-column [class] = "'adf-key-icon'" key="icon" type="icon" [sortable]="false"> <data-column
class="adf-key-icon"
key="icon" type="icon"
[sortable]="false">
</data-column> </data-column>
<data-column [class]= "'adf-authorityId-label adf-ellipsis-cell adf-expand-cell-2'" title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.AUTHORITY_ID' | translate}}" key="authorityId"></data-column> <data-column
<data-column [class]="'adf-ellipsis-cell adf-expand-cell-1'" title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE' | translate}}" key="name"> class="adf-authorityId-label adf-ellipsis-cell adf-expand-cell-2"
title="PERMISSION_MANAGER.PERMISSION_DISPLAY.AUTHORITY_ID"
key="authorityId">
</data-column>
<data-column
class="adf-ellipsis-cell adf-expand-cell-1"
title="PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE"
key="name">
<ng-template let-entry="$implicit"> <ng-template let-entry="$implicit">
<mat-form-field *ngIf="!entry.row.getValue('isInherited') else show_only_label"> <mat-form-field *ngIf="!entry.row.getValue('isInherited') else show_only_label">
<mat-select id="adf-select-role-permission" <mat-select
id="adf-select-role-permission"
[placeholder]="entry.data.getValue(entry.row, entry.col)" [placeholder]="entry.data.getValue(entry.row, entry.col)"
value="{{entry.data.getValue(entry.row, entry.col)}}" value="{{entry.data.getValue(entry.row, entry.col)}}"
(selectionChange)="saveNewRole($event, entry.row.obj)"> (selectionChange)="saveNewRole($event, entry.row.obj)">
<mat-option *ngFor="let role of settableRoles" [value]="role"> <mat-option *ngFor="let role of settableRoles" [value]="role">{{ role }}</mat-option>
{{ role }}
</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<ng-template #show_only_label> <ng-template #show_only_label>
@ -32,27 +41,40 @@
</ng-template> </ng-template>
</ng-template> </ng-template>
</data-column> </data-column>
<data-column [class]="'adf-permission-label'" title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.INHERITED' | translate}}" key="isInherited"> <data-column
class="adf-permission-label"
title="PERMISSION_MANAGER.PERMISSION_DISPLAY.INHERITED"
key="isInherited"
[focus]="false">
<ng-template let-entry="$implicit"> <ng-template let-entry="$implicit">
<mat-chip-list> <mat-chip-list>
<mat-chip [class]="'mat-chip mat-primary mat-standard-chip mat-chip-selected adf-inherited-label '" <mat-chip
*ngIf="!!entry.data.getValue(entry.row, entry.col) else locally_set_chip" *ngIf="!!entry.data.getValue(entry.row, entry.col) else locally_set_chip"
class="mat-chip mat-primary mat-standard-chip mat-chip-selected adf-inherited-label"
id="adf-permission-inherited-label" id="adf-permission-inherited-label"
color="primary" selected="true">{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.INHERITED' | translate}}</mat-chip> color="primary"
selected="true">{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.INHERITED' | translate}}</mat-chip>
</mat-chip-list> </mat-chip-list>
<ng-template #locally_set_chip> <ng-template #locally_set_chip>
<mat-chip-list [class] = "'adf-locallyset-label'"> <mat-chip-list class="adf-locallyset-label">
<mat-chip id="adf-permission-locallyset-label" <mat-chip
color="accent" selected="true"> id="adf-permission-locallyset-label"
color="accent"
selected="true">
{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.LOCALLY_SET' | translate}} {{'PERMISSION_MANAGER.PERMISSION_DISPLAY.LOCALLY_SET' | translate}}
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
</ng-template> </ng-template>
</ng-template> </ng-template>
</data-column> </data-column>
<data-column [class]="'adf-delete-permission'" key="delete"> <data-column class="adf-delete-permission" key="delete">
<ng-template let-entry="$implicit"> <ng-template let-entry="$implicit">
<button *ngIf="!entry.row.getValue('isInherited')" mat-icon-button color="primary" (click)="removePermission(entry.row.obj)" data-automation-id="adf-delete-permission-button"> <button
*ngIf="!entry.row.getValue('isInherited')"
mat-icon-button
color="primary"
(click)="removePermission(entry.row.obj)"
data-automation-id="adf-delete-permission-button">
<mat-icon>highlight_off</mat-icon> <mat-icon>highlight_off</mat-icon>
</button> </button>
</ng-template> </ng-template>

6
lib/core/datatable/components/datatable/datatable.component.html
View File

@ -14,7 +14,7 @@
role="row"> role="row">
<!-- Actions (left) --> <!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-cell-header"> <div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-cell-header">
<span class="adf-sr-only">Actions</span> <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
</div> </div>
<!-- Columns --> <!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox"> <div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
@ -33,11 +33,11 @@
[attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null" [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
adf-drop-zone dropTarget="header" [dropColumn]="col"> adf-drop-zone dropTarget="header" [dropColumn]="col">
<span *ngIf="col.title" class="adf-datatable-cell-value">{{ col.title | translate}}</span> <span *ngIf="col.title" class="adf-datatable-cell-value">{{ col.title | translate}}</span>
<span class="adf-sr-only" aria-live="polite">{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}</span> <span *ngIf="col.title && col.sortable" class="adf-sr-only" aria-live="polite">{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}</span>
</div> </div>
<!-- Actions (right) --> <!-- Actions (right) -->
<div *ngIf="actions && actionsPosition === 'right'" class="adf-actions-column adf-datatable-cell-header adf-datatable__actions-cell"> <div *ngIf="actions && actionsPosition === 'right'" class="adf-actions-column adf-datatable-cell-header adf-datatable__actions-cell">
<span class="adf-sr-only">Actions</span> <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
</div> </div>
</adf-datatable-row> </adf-datatable-row>
<mat-form-field *ngIf="display === 'gallery' && showHeader"> <mat-form-field *ngIf="display === 'gallery' && showHeader">

1
lib/core/i18n/en.json
View File

@ -276,6 +276,7 @@
"TOOLTIP": "Content actions" "TOOLTIP": "Content actions"
}, },
"ACCESSIBILITY": { "ACCESSIBILITY": {
"ACTIONS": "Actions",
"SELECT_ALL": "Select all", "SELECT_ALL": "Select all",
"SELECT_FILE": "Select file", "SELECT_FILE": "Select file",
"SORT_ASCENDING": "Ascending", "SORT_ASCENDING": "Ascending",