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

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

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