From 2f3e9fcce551638ab5921c5760e31b335ea5bf9d Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 10 Mar 2022 20:36:15 +0200 Subject: [PATCH 1/4] test(hgrid): Implements target scenario --- .../hierarchical-grid.spec.ts | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 5ef13a4f461..3d82b10dc64 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -565,6 +565,30 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { expect(row1.expanded).toBe(false); expect(row2.expanded).toBe(true); }); + + it('should update aria-activeDescendants when navigating around', () => { + hierarchicalGrid.cellSelection = 'single'; + expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-0'); + + let cellElem = (hierarchicalGrid.gridAPI.get_row_by_index(0).cells as QueryList).toArray()[1]; + UIInteractions.simulatePointerOverElementEvent('pointerdown', cellElem.nativeElement); + fixture.detectChanges(); + expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-0_0_1'); + + const row1 = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; + UIInteractions.simulateClickAndSelectEvent(row1.expander); + fixture.detectChanges(); + + const childGrid = hierarchicalGrid.getChildGrids()[0]; + expect(childGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-1'); + + cellElem = (childGrid.gridAPI.get_row_by_index(0).cells as QueryList).toArray()[1]; + UIInteractions.simulatePointerOverElementEvent('pointerdown', cellElem.nativeElement); + fixture.detectChanges(); + + expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-0'); + expect(childGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-1_0_1'); + }); }); describe('IgxHierarchicalGrid Row Islands #hGrid', () => { From 2de4962daf5aa04defda5177d432502bf399feb0 Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 10 Mar 2022 20:38:06 +0200 Subject: [PATCH 2/4] chore(hgrid): Deletes wwhole active node upon clearance --- .../hierarchical-grid-navigation.service.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts index 540f9acb04f..3d4ac12d4a3 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts @@ -1,8 +1,8 @@ -import { IgxGridNavigationService } from '../grid-navigation.service'; -import { first } from 'rxjs/operators'; -import { SUPPORTED_KEYS, NAVIGATION_KEYS } from '../../core/utils'; import { Injectable } from '@angular/core'; +import { first } from 'rxjs/operators'; +import { NAVIGATION_KEYS, SUPPORTED_KEYS } from '../../core/utils'; import { GridType, IPathSegment, RowType } from '../common/grid.interface'; +import { IActiveNode, IgxGridNavigationService } from '../grid-navigation.service'; @Injectable() export class IgxHierarchicalGridNavigationService extends IgxGridNavigationService { @@ -301,8 +301,8 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi private clearActivation() { // clear if previous activation exists. - if (this.activeNode) { - this.activeNode.row = null; + if (this.activeNode && Object.keys(this.activeNode).length) { + this.activeNode = Object.assign({} as IActiveNode); } } From bf9c22c2af5a905cefa9f4f434d1a8bce1393af5 Mon Sep 17 00:00:00 2001 From: 3phase Date: Thu, 10 Mar 2022 20:38:27 +0200 Subject: [PATCH 3/4] chore(*): Lints nav service --- .../src/lib/grids/grid-navigation.service.ts | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index 0a7f4b306f7..93d3638bceb 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -75,7 +75,8 @@ export class IgxGridNavigationService { const shift = event.shiftKey; const ctrl = event.ctrlKey; if (NAVIGATION_KEYS.has(key) && this.pendingNavigation) { - event.preventDefault(); return; + event.preventDefault(); + return; } const type = this.isDataRow(this.activeNode.row) ? 'dataCell' : @@ -132,7 +133,8 @@ export class IgxGridNavigationService { public focusTbody(event) { const gridRows = this.grid.verticalScrollContainer.totalItemCount ?? this.grid.dataView.length; if (gridRows < 1) { - this.activeNode = null; return; + this.activeNode = null; + return; } if (!this.activeNode || !Object.keys(this.activeNode).length || this.activeNode.row < 0 || this.activeNode.row > gridRows - 1) { const hasLastActiveNode = Object.keys(this.lastActiveNode).length; @@ -144,10 +146,12 @@ export class IgxGridNavigationService { this.grid.navigateTo(this.activeNode.row, this.activeNode.column, (obj) => { obj.target?.activate(event); this.grid.cdr.detectChanges(); - } ); + }); } else { - const range = { rowStart: this.activeNode.row, rowEnd: this.activeNode.row, - columnStart: this.activeNode.column, columnEnd: this.activeNode.column }; + const range = { + rowStart: this.activeNode.row, rowEnd: this.activeNode.row, + columnStart: this.activeNode.column, columnEnd: this.activeNode.column + }; this.grid.selectRange(range); this.grid.notifyChanges(); } @@ -157,7 +161,7 @@ export class IgxGridNavigationService { public focusFirstCell(header = true) { if ((header || this.grid.dataView.length) && this.activeNode && (this.activeNode.row === -1 || this.activeNode.row === this.grid.dataView.length || - (!header && !this.grid.hasSummarizedColumns))) { + (!header && !this.grid.hasSummarizedColumns))) { return; } const shouldScrollIntoView = this.lastActiveNode && (header && this.lastActiveNode.row !== -1) || @@ -253,11 +257,11 @@ export class IgxGridNavigationService { let curRow: any; if (rowIndex < 0 || rowIndex > this.grid.dataView.length - 1) { - curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex]; - if (!curRow){ + curRow = this.grid.dataView[rowIndex - this.grid.virtualizationState.startIndex]; + if (!curRow) { return false; } - }else { + } else { curRow = this.grid.dataView[rowIndex]; } return curRow && !this.grid.isGroupByRecord(curRow) && !this.grid.isDetailRecord(curRow) @@ -495,7 +499,7 @@ export class IgxGridNavigationService { protected forOfDir(): IgxForOfDirective { const forOfDir = this.grid.dataRowList.length > 0 ? this.grid.dataRowList.first.virtDirRow : this.grid.summariesRowList.length ? - this.grid.summariesRowList.first.virtDirRow : this.grid.headerContainer; + this.grid.summariesRowList.first.virtDirRow : this.grid.headerContainer; return forOfDir as IgxForOfDirective; } @@ -681,17 +685,21 @@ export class IgxGridNavigationService { } } - private firstVisibleNode(rowIndex?) { + private firstVisibleNode(rowIndex?) { const colIndex = this.lastActiveNode.column !== undefined ? this.lastActiveNode.column : this.grid.visibleColumns.sort((c1, c2) => c1.visibleIndex - c2.visibleIndex) - .find(c => this.isColumnFullyVisible(c.visibleIndex))?.visibleIndex; + .find(c => this.isColumnFullyVisible(c.visibleIndex))?.visibleIndex; const column = this.grid.visibleColumns.find((col) => !col.columnLayout && col.visibleIndex === colIndex); const rowInd = rowIndex ? rowIndex : this.grid.rowList.find(r => !this.shouldPerformVerticalScroll(r.index, colIndex))?.index; - const node = { row: rowInd ?? 0, + const node = { + row: rowInd ?? 0, column: column?.visibleIndex ?? 0, level: column?.level ?? 0, - mchCache: column ? {level: column.level, visibleIndex: column.visibleIndex} : {} as ColumnGroupsCache, - layout: column && column.columnLayoutChild ? { rowStart: column.rowStart, colStart: column.colStart, - rowEnd: column.rowEnd, colEnd: column.colEnd, columnVisibleIndex: column.visibleIndex} : null }; + mchCache: column ? { level: column.level, visibleIndex: column.visibleIndex } : {} as ColumnGroupsCache, + layout: column && column.columnLayoutChild ? { + rowStart: column.rowStart, colStart: column.colStart, + rowEnd: column.rowEnd, colEnd: column.colEnd, columnVisibleIndex: column.visibleIndex + } : null + }; return node; } From b5240bfbc2af6715392d7cdcf8380ddf7b99bb14 Mon Sep 17 00:00:00 2001 From: 3phase Date: Fri, 11 Mar 2022 09:25:25 +0200 Subject: [PATCH 4/4] test(hgrid): Fixes grid id to be dynamically assigned instead of hardcoded --- .../grids/hierarchical-grid/hierarchical-grid.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 3d82b10dc64..9dca107c692 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -568,26 +568,26 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { it('should update aria-activeDescendants when navigating around', () => { hierarchicalGrid.cellSelection = 'single'; - expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-0'); + expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual(hierarchicalGrid.id); let cellElem = (hierarchicalGrid.gridAPI.get_row_by_index(0).cells as QueryList).toArray()[1]; UIInteractions.simulatePointerOverElementEvent('pointerdown', cellElem.nativeElement); fixture.detectChanges(); - expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-0_0_1'); + expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual(`${hierarchicalGrid.id}_0_1`); const row1 = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row1.expander); fixture.detectChanges(); const childGrid = hierarchicalGrid.getChildGrids()[0]; - expect(childGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-1'); + expect(childGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual(childGrid.id); cellElem = (childGrid.gridAPI.get_row_by_index(0).cells as QueryList).toArray()[1]; UIInteractions.simulatePointerOverElementEvent('pointerdown', cellElem.nativeElement); fixture.detectChanges(); - expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-0'); - expect(childGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual('igx-hierarchical-grid-1_0_1'); + expect(hierarchicalGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual(hierarchicalGrid.id); + expect(childGrid.tbody.nativeElement.attributes['aria-activedescendant'].value).toEqual(`${childGrid.id}_0_1`); }); });