Skip to content

Commit 50dfe46

Browse files
committed
fix(grids): active descendant points to the active column header
1 parent 3445331 commit 50dfe46

File tree

7 files changed

+26
-13
lines changed

7 files changed

+26
-13
lines changed

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2765,13 +2765,10 @@ export abstract class IgxGridBaseDirective implements GridType,
27652765
public get activeDescendant() {
27662766
const activeElem = this.navigation.activeNode;
27672767

2768-
if (!activeElem || !Object.keys(activeElem).length) {
2769-
return this.id;
2768+
if (!activeElem || !Object.keys(activeElem).length || activeElem.row < 0) {
2769+
return null;
27702770
}
2771-
2772-
return activeElem.row < 0 ?
2773-
`${this.id}_${activeElem.row}_${activeElem.mchCache.level}_${activeElem.column}` :
2774-
`${this.id}_${activeElem.row}_${activeElem.column}`;
2771+
return `${this.id}_${activeElem.row}_${activeElem.column}`;
27752772
}
27762773

27772774
/** @hidden @internal */

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
<igx-grid-header-row class="igx-grid-thead" tabindex="0"
1818
[grid]="this"
1919
[hasMRL]="hasColumnLayouts"
20-
[activeDescendant]="activeDescendant"
2120
[width]="calcWidth"
2221
[pinnedColumnCollection]="pinnedColumns"
2322
[unpinnedColumnCollection]="unpinnedColumns"

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
}
4343
<div class="igx-grid-thead__title"
4444
role="columnheader"
45+
[id]="headerID"
4546
[attr.aria-hidden]="ariaHidden"
4647
[attr.aria-label]="column.header || column.field"
4748
[attr.aria-expanded]="column.expanded"
@@ -100,7 +101,7 @@
100101
role="columnheader"
101102
[attr.aria-hidden]="ariaHidden"
102103
class="igx-grid-th--fw"
103-
[id]="grid.id + '_' + column.field"
104+
[id]="headerID"
104105
[ngClass]="column.headerClasses"
105106
[ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
106107
[igxColumnMovingDrag]="column"

projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
6060
return this.column.colStart;
6161
}
6262

63-
@HostBinding('attr.id')
6463
public get headerID() {
6564
return `${this.grid.id}_-1_${this.column.level}_${this.column.visibleIndex}`;
6665
}

projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Component,
55
DoCheck,
66
ElementRef,
7+
HostBinding,
78
Input,
89
QueryList,
910
TemplateRef,
@@ -52,8 +53,15 @@ export class IgxGridHeaderRowComponent implements DoCheck {
5253
@Input()
5354
public unpinnedColumnCollection: ColumnType[] = [];
5455

55-
@Input()
56-
public activeDescendant: string;
56+
@HostBinding('attr.aria-activedescendant')
57+
public get activeDescendant() {
58+
const activeElem = this.navigation.activeNode;
59+
60+
if (!activeElem || !Object.keys(activeElem).length || activeElem.row >= 0) {
61+
return null;
62+
}
63+
return `${this.grid.id}_${activeElem.row}_${activeElem.level}_${activeElem.column}`;
64+
}
5765

5866
@Input({ transform: booleanAttribute })
5967
public hasMRL: boolean;

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<igx-grid-header-row class="igx-grid-thead" tabindex="0"
55
[grid]="this"
66
[hasMRL]="hasColumnLayouts"
7-
[activeDescendant]="activeDescendant"
87
[width]="calcWidth"
98
[pinnedColumnCollection]="pinnedColumns"
109
[unpinnedColumnCollection]="unpinnedColumns"

projects/igniteui-angular/src/lib/test-utils/tree-grid-functions.spec.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const TREE_CELL_LOADING_CSS_CLASS = '.igx-grid__tree-loading-indicator';
2222
export const NUMBER_CELL_CSS_CLASS = 'igx-grid__td--number';
2323
export const CELL_VALUE_DIV_CSS_CLASS = '.igx-grid__td-text';
2424
export const ROW_EDITING_BANNER_OVERLAY_CLASS = 'igx-overlay__content';
25-
25+
export const TREE_GRID_CONTENT_CLASS = '.igx-grid__tbody-content';
2626
export class TreeGridFunctions {
2727
public static getHeaderRow(fix) {
2828
return fix.debugElement.query(By.css(TREE_HEADER_ROW_CSS_CLASS));
@@ -415,6 +415,16 @@ export class TreeGridFunctions {
415415
expect(selectedCell.column.field).toEqual(cell.column.field);
416416
expect(selectedCell.row.index).toEqual(cell.row.index);
417417
expect(selectedCell.value).toEqual(cell.value);
418+
419+
// Verify the selected cell is the active descendant of the content element.
420+
let cellElement = cell.nativeElement;
421+
if (cell instanceof IgxGridCellComponent) {
422+
cellElement = treeGrid.gridAPI.get_cell_by_index(cell.row.index, cell.column.field).nativeElement;
423+
}
424+
expect(treeGrid.activeDescendant).toEqual(cellElement.id);
425+
const gridContentEl = treeGrid.nativeElement.querySelector(TREE_GRID_CONTENT_CLASS);
426+
const activeDescendant = gridContentEl.getAttribute('aria-activedescendant');
427+
expect(activeDescendant).toBe(cellElement.id);
418428
}
419429
}
420430
}

0 commit comments

Comments
 (0)