[ADF-2990] Datatable - access header row via keyboard (#5206)

* header row as adf-datatable-row

* remove tabindex if header is hidden

* adjust logic if no row data is passed

* skip row focus if disabled

* set active row index on header interaction

* take in account header row

* fix header row and cells focus

* tests

* fix reference

* fix tests

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -230,6 +230,8 @@ describe('DataTable', () => {
         });
 
         dataTable.ngOnChanges({});
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
         dataTable.onColumnHeaderClick(column);
     });
 
@@ -709,6 +711,8 @@ describe('DataTable', () => {
 
     it('should not sort if column is missing', () => {
         dataTable.ngOnChanges({ 'data': new SimpleChange('123', {}, true) });
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
         const adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
         dataTable.onColumnHeaderClick(null);
@@ -717,6 +721,8 @@ describe('DataTable', () => {
 
     it('should not sort upon clicking non-sortable column header', () => {
         dataTable.ngOnChanges({ 'data': new SimpleChange('123', {}, true) });
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
         const adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
 
@@ -730,6 +736,8 @@ describe('DataTable', () => {
 
     it('should set sorting upon column header clicked', () => {
         dataTable.ngOnChanges({ 'data': new SimpleChange('123', {}, true) });
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
         const adapter = dataTable.data;
         spyOn(adapter, 'setSorting').and.callThrough();
 
@@ -749,6 +757,8 @@ describe('DataTable', () => {
 
     it('should invert sorting upon column header clicked', () => {
         dataTable.ngOnChanges({ 'data': new SimpleChange('123', {}, true) });
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
 
         const adapter = dataTable.data;
         const sorting = new DataSorting('column_1', 'asc');
@@ -789,6 +799,8 @@ describe('DataTable', () => {
                 new ObjectDataColumn({ key: 'other', sortable: true })
             ]
         );
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
 
         const [col1, col2] = dataTable.getSortableColumns();
 
@@ -1227,8 +1239,8 @@ describe('Accesibility', () => {
 
     it('should focus previous row on ArrowUp event', () => {
         const event = new KeyboardEvent('keyup', {
-            code: 'ArrowDown',
-            key: 'ArrowDown',
+            code: 'ArrowUp',
+            key: 'ArrowUp',
             keyCode: 38
         } as KeyboardEventInit );
 
@@ -1254,4 +1266,68 @@ describe('Accesibility', () => {
 
         expect(document.activeElement.getAttribute('data-automation-id')).toBe('datatable-row-0');
     });
+
+    it('should select header row when `showHeader` is true', () => {
+        const event = new KeyboardEvent('keyup', {
+            code: 'ArrowUp',
+            key: 'ArrowUp',
+            keyCode: 38
+        } as KeyboardEventInit );
+
+        const dataRows =
+        [ { name: 'test1'}, { name: 'test2' } ];
+
+        dataTable.data = new ObjectDataTableAdapter([],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.showHeader = true;
+
+        dataTable.ngOnChanges({
+            rows: new SimpleChange(null, dataRows, false)
+        });
+
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
+
+        const rowElement = document.querySelector('.adf-datatable-row[data-automation-id="datatable-row-0"]');
+        const rowCellElement = rowElement.querySelector('.adf-datatable-cell');
+
+        rowCellElement.dispatchEvent(new MouseEvent('click'));
+        fixture.debugElement.nativeElement.dispatchEvent(event);
+
+        expect(document.activeElement.getAttribute('data-automation-id')).toBe('datatable-row-header');
+    });
+
+    it('should not select header row when `showHeader` is false', () => {
+        const event = new KeyboardEvent('keyup', {
+            code: 'ArrowUp',
+            key: 'ArrowUp',
+            keyCode: 38
+        } as KeyboardEventInit );
+
+        const dataRows =
+        [ { name: 'test1'}, { name: 'test2' } ];
+
+        dataTable.data = new ObjectDataTableAdapter([],
+            [new ObjectDataColumn({ key: 'name' })]
+        );
+
+        dataTable.showHeader = false;
+
+        dataTable.ngOnChanges({
+            rows: new SimpleChange(null, dataRows, false)
+        });
+
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
+
+        const rowElement = document.querySelector('.adf-datatable-row[data-automation-id="datatable-row-0"]');
+        const rowCellElement = rowElement.querySelector('.adf-datatable-cell');
+
+        rowCellElement.dispatchEvent(new MouseEvent('click'));
+        fixture.debugElement.nativeElement.dispatchEvent(event);
+
+        expect(document.activeElement.getAttribute('data-automation-id')).toBe('datatable-row-1');
+    });
 });