inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-23 18:05:09 +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">
<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 [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 [class]="'adf-ellipsis-cell adf-expand-cell-1'" title="{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.ROLE' | translate}}" key="name">
<data-column
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">
<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)"
value="{{entry.data.getValue(entry.row, entry.col)}}"
(selectionChange)="saveNewRole($event, entry.row.obj)">
<mat-option *ngFor="let role of settableRoles" [value]="role">
{{ role }}
</mat-option>
<mat-option *ngFor="let role of settableRoles" [value]="role">{{ role }}</mat-option>
</mat-select>
</mat-form-field>
<ng-template #show_only_label>
@ -32,27 +41,40 @@
</ng-template>
</ng-template>
</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">
<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"
class="mat-chip mat-primary mat-standard-chip mat-chip-selected adf-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>
<ng-template #locally_set_chip>
<mat-chip-list [class] = "'adf-locallyset-label'">
<mat-chip id="adf-permission-locallyset-label"
color="accent" selected="true">
<mat-chip-list class="adf-locallyset-label">
<mat-chip
id="adf-permission-locallyset-label"
color="accent"
selected="true">
{{'PERMISSION_MANAGER.PERMISSION_DISPLAY.LOCALLY_SET' | translate}}
</mat-chip>
</mat-chip-list>
</ng-template>
</ng-template>
</data-column>
<data-column [class]="'adf-delete-permission'" key="delete">
<data-column class="adf-delete-permission" key="delete">
<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>
</button>
</ng-template>

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

@ -14,7 +14,7 @@
role="row">
<!-- Actions (left) -->
<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>
<!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-cell-header adf-datatable-checkbox">
@ -33,11 +33,11 @@
[attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null"
adf-drop-zone dropTarget="header" [dropColumn]="col">
<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>
<!-- Actions (right) -->
<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>
</adf-datatable-row>
<mat-form-field *ngIf="display === 'gallery' && showHeader">

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

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