inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4888] DocumentList - cell header title is announced over cell value (#5068)

Browse Source 
* fix focus outline

* focus on cell values

* focus on size value if defined

* row actions menu aria-label
This commit is contained in:
Cilibiu Bogdan
2019-09-12 17:04:43 +03:00
committed by Eugenio Romano
parent c2c883885e
commit 5b11e52903
3 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,7 +99,6 @@
[attr.data-automation-id]="getAutomationValue(row)"
[attr.aria-selected]="row.isSelected ? true : false"
[attr.aria-label]="col.title ? (col.title | translate) : null"
tabindex="0"
(click)="onRowClick(row, $event)"
(keydown.enter)="onEnterKeyPressed(row, $event)"
[adf-context-menu]="getContextMenuActions(row, col)"
@@ -107,7 +106,7 @@
adf-drop-zone dropTarget="cell" [dropColumn]="col" [dropRow]="row">
<div *ngIf="!col.template" class="adf-datatable-cell-container">
<ng-container [ngSwitch]="col.type">
<div *ngSwitchCase="'image'" class="adf-cell-value">
<div *ngSwitchCase="'image'" class="adf-cell-value" tabindex="0">
<mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
</mat-icon>
<ng-template #no_iconvalue>
@@ -131,7 +130,7 @@
</ng-template>
</ng-template>
</div>
<div *ngSwitchCase="'icon'" class="adf-cell-value">
<div *ngSwitchCase="'icon'" class="adf-cell-value" tabindex="0">
<span class="adf-sr-only">
{{ 'ADF-DATATABLE.ACCESSIBILITY.ICON_ALT_TEXT' | translate:{
type: 'ADF-DATATABLE.FILE_TYPE.' + (data.getValue(row, col) | fileType | uppercase) | translate
@@ -140,7 +139,7 @@
</span>
<mat-icon>{{ data.getValue(row, col) }}</mat-icon>
</div>
<div *ngSwitchCase="'date'" class="adf-cell-value"
<div *ngSwitchCase="'date'" class="adf-cell-value" tabindex="0"
[attr.data-automation-id]="'date_' + (data.getValue(row, col) | adfLocalizedDate: 'medium') ">
<adf-date-cell class="adf-datatable-center-date-column-ie"
[data]="data"
@@ -149,7 +148,7 @@
[tooltip]="getCellTooltip(row, col)">
</adf-date-cell>
</div>
<div *ngSwitchCase="'location'" class="adf-cell-value"
<div *ngSwitchCase="'location'" tabindex="0" class="adf-cell-value"
[attr.data-automation-id]="'location' + data.getValue(row, col)">
<adf-location-cell
[data]="data"
@@ -158,7 +157,7 @@
[tooltip]="getCellTooltip(row, col)">
</adf-location-cell>
</div>
<div *ngSwitchCase="'fileSize'" class="adf-cell-value"
<div *ngSwitchCase="'fileSize'" [attr.tabindex]="data.getValue(row, col)? 0 : -1" class="adf-cell-value"
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
<adf-filesize-cell class="adf-datatable-center-size-column-ie"
[data]="data"
@@ -167,7 +166,7 @@
[tooltip]="getCellTooltip(row, col)">
</adf-filesize-cell>
</div>
<div *ngSwitchCase="'text'" class="adf-cell-value"
<div *ngSwitchCase="'text'" tabindex="0" class="adf-cell-value"
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
<adf-datatable-cell
[copyContent]="col.copyContent"
@@ -177,7 +176,7 @@
[tooltip]="getCellTooltip(row, col)">
</adf-datatable-cell>
</div>
<div *ngSwitchCase="'json'" class="adf-cell-value">
<div *ngSwitchCase="'json'" tabindex="0" class="adf-cell-value">
<adf-json-cell
[copyContent]="col.copyContent"
[data]="data"
@@ -191,7 +190,7 @@
</ng-container>
</div>
<div *ngIf="col.template" class="adf-datatable-cell-container">
<div class="adf-cell-value">
<div class="adf-cell-value" tabindex="0">
<ng-container
[ngTemplateOutlet]="col.template"
[ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
@@ -205,6 +204,7 @@
role="gridcell"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie">
<button mat-icon-button [matMenuTriggerFor]="menu"
[attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.ROW_OPTION_BUTTON' | translate"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
[attr.id]="'action_menu_right_' + idx"
[attr.data-automation-id]="'action_menu_' + idx">

3
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -384,6 +384,7 @@
min-height: inherit;
align-items: center;
display: flex;
width: 100%;
}
.adf-datatable-cell-value {
@@ -411,6 +412,7 @@
min-height: inherit;
align-items: center;
word-break: break-all;
width: 100%;
}
.adf-datatable__actions-cell, .adf-datatable-cell--image {
@@ -480,6 +482,7 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding: 0 4px;
&.adf-datatable-cell-header,
.adf-datatable-content-cell {

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

@@ -262,7 +262,8 @@
"SORT_ASCENDING": "ascending",
"SORT_DESCENDING": "descending",
"ICON_TEXT": "File type {{ type }}",
"ICON_DISABLED": "disabled"
"ICON_DISABLED": "disabled",
"ROW_OPTION_BUTTON": "Actions menu"
},
"FILE_TYPE": {
"DOCUMENT": "document",