From 5b11e529030e9bd375f315ba9312e3fb6858cb88 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Thu, 12 Sep 2019 17:04:43 +0300
Subject: [PATCH] [ADF-4888] DocumentList - cell header title is announced over
 cell value (#5068)

* fix focus outline

* focus on cell values

* focus on size value if defined

* row actions menu aria-label
---
 .../datatable/datatable.component.html         | 18 +++++++++---------
 .../datatable/datatable.component.scss         |  3 +++
 lib/core/i18n/en.json                          |  3 ++-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/lib/core/datatable/components/datatable/datatable.component.html b/lib/core/datatable/components/datatable/datatable.component.html
index 400b555abc..154ae8f025 100644
--- a/lib/core/datatable/components/datatable/datatable.component.html
+++ b/lib/core/datatable/components/datatable/datatable.component.html
@@ -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">
diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss
index e173a1a46c..9b837d823e 100644
--- a/lib/core/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/datatable/components/datatable/datatable.component.scss
@@ -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 {
diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json
index bebfafb2a5..cf7086d8e7 100644
--- a/lib/core/i18n/en.json
+++ b/lib/core/i18n/en.json
@@ -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",