From d6ac81c28a4b152fa00b902e79c4e35b183eee58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Popovics=20Andr=C3=A1s?=
 <popovicsandras@users.noreply.github.com>
Date: Tue, 3 Oct 2017 22:27:24 +0100
Subject: [PATCH] [ADF-1626] Fix double tabbing issue in datatable (#2416)

* Fix double tabbing issue in datatable

* Fix accessibility issue for process list
---
 .../src/components/processlist.component.html |  3 +-
 .../components/processlist.component.spec.ts  | 34 +++++++++++++++++++
 .../src/components/processlist.component.ts   | 12 +++++++
 .../datatable/datatable.component.html        |  1 -
 4 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/ng2-components/ng2-activiti-processlist/src/components/processlist.component.html b/ng2-components/ng2-activiti-processlist/src/components/processlist.component.html
index 3ece0a7420..ac62ed5b68 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/processlist.component.html
+++ b/ng2-components/ng2-activiti-processlist/src/components/processlist.component.html
@@ -3,7 +3,8 @@
     <adf-datatable
         [data]="data"
         [loading]="isLoading"
-        (rowClick)="onRowClick($event)">
+        (rowClick)="onRowClick($event)"
+        (row-keyup)="onRowKeyUp($event)">
         <loading-content-template>
             <ng-template>
                 <!--Add your custom loading template here-->
diff --git a/ng2-components/ng2-activiti-processlist/src/components/processlist.component.spec.ts b/ng2-components/ng2-activiti-processlist/src/components/processlist.component.spec.ts
index ad286b6213..58b642672d 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/processlist.component.spec.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/processlist.component.spec.ts
@@ -278,6 +278,40 @@ describe('ProcessInstanceListComponent', () => {
         component.onRowClick(rowEvent);
     });
 
+    it('should emit row click event on Enter', (done) => {
+        let prevented = false;
+        let keyEvent = new CustomEvent('Keyboard event', { detail: {
+            keyboardEvent: { key: 'Enter' },
+            row: new ObjectDataRow({ id: 999 })
+        }});
+
+        spyOn(keyEvent, 'preventDefault').and.callFake(() => prevented = true);
+
+        component.rowClick.subscribe(taskId => {
+            expect(taskId).toEqual(999);
+            expect(component.getCurrentId()).toEqual(999);
+            expect(prevented).toBeTruthy();
+            done();
+        });
+
+        component.onRowKeyUp(keyEvent);
+    });
+
+    it('should NOT emit row click event on every other key', async(() => {
+        let triggered = false;
+        let keyEvent = new CustomEvent('Keyboard event', { detail: {
+            keyboardEvent: { key: 'Space' },
+            row: new ObjectDataRow({ id: 999 })
+        }});
+
+        component.rowClick.subscribe(() => triggered = true);
+        component.onRowKeyUp(keyEvent);
+
+        fixture.whenStable().then(() => {
+            expect(triggered).toBeFalsy();
+        });
+    }));
+
     describe('component changes', () => {
 
         beforeEach(() => {
diff --git a/ng2-components/ng2-activiti-processlist/src/components/processlist.component.ts b/ng2-components/ng2-activiti-processlist/src/components/processlist.component.ts
index f4e490d12d..8368be2f84 100644
--- a/ng2-components/ng2-activiti-processlist/src/components/processlist.component.ts
+++ b/ng2-components/ng2-activiti-processlist/src/components/processlist.component.ts
@@ -235,6 +235,18 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
         this.rowClick.emit(this.currentInstanceId);
     }
 
+    /**
+     * Emit the event rowClick passing the current task id when pressed the Enter key on the selected row
+     * @param event
+     */
+    onRowKeyUp(event: CustomEvent) {
+        if (event.detail.keyboardEvent.key === 'Enter') {
+            event.preventDefault();
+            this.currentInstanceId = event.detail.row.getValue('id');
+            this.rowClick.emit(this.currentInstanceId);
+        }
+    }
+
     /**
      * Optimize name field
      * @param instances
diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
index 6a1e05d2d5..a53e0962a4 100644
--- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
+++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html
@@ -36,7 +36,6 @@
     <tbody>
     <ng-container *ngIf="!loading">
         <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"