accessibility enhancements for datatable (#2266)

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html

@@ -18,7 +18,11 @@
             [attr.data-automation-id]="'auto_id_' + col.key"
             [class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')"
             [class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
-            (click)="onColumnHeaderClick(col)">
+            (click)="onColumnHeaderClick(col)"
+            (keyup.enter)="onColumnHeaderClick(col)"
+            role="button"
+            tabindex="0"
+            title="{{ col.title }}">
             <span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
             <span *ngIf="col.title">{{ col.title | translate}}</span>
         </th>
@@ -31,11 +35,14 @@
 
     <tbody>
     <ng-container *ngIf="!loading">
-        <tr *ngFor="let row of data.getRows(); let idx = index" tabindex="0"
+        <tr *ngFor="let row of data.getRows(); let idx = index"
+            tabindex="0"
+            role="button"
             [class.is-selected]="row.isSelected"
             [adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
             [ngStyle]="rowStyle"
-            [ngClass]="getRowStyle(row)">
+            [ngClass]="getRowStyle(row)"
+            (keyup.enter)="onKeyboardNavigate(row, $event)">
 
             <!-- Actions (left) -->
             <td *ngIf="actions && actionsPosition === 'left'">
@@ -62,6 +69,7 @@
             </td>
             <td *ngFor="let col of data.getColumns()"
                 class="adf-data-table-cell adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}}"
+                tabindex="0"
                 (click)="onRowClick(row, $event)"
                 [context-menu]="getContextMenuActions(row, col)"
                 [context-menu-enabled]="contextMenu">

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss

@@ -82,6 +82,13 @@
             &:last-of-type {
                 padding-right: 24px;
             }
+
+            &:focus {
+                outline-offset: -1px;
+                outline-width: 1px;
+                outline-color: rgb(68, 138, 255);
+                outline-style: solid;
+            }
         }
 
         td {

ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts

@@ -280,6 +280,21 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck
         this.clickObserver.next(dataRowEvent);
     }
 
+    onKeyboardNavigate(row: DataRow, e: KeyboardEvent) {
+        if (e) {
+            e.preventDefault();
+        }
+        const event = new DataRowEvent(row, e, this);
+
+        this.rowDblClick.emit(event);
+        this.elementRef.nativeElement.dispatchEvent(
+            new CustomEvent('row-dblclick', {
+                detail: event,
+                bubbles: true
+            })
+        );
+    }
+
     onColumnHeaderClick(column: DataColumn) {
         if (column && column.sortable) {
             let current = this.data.getSorting();