Skip to content

Commit 70a63e0

Browse files
committed
fix(cell): add row and col index aria attrs
1 parent 987fe7f commit 70a63e0

File tree

2 files changed

+32
-0
lines changed

2 files changed

+32
-0
lines changed

projects/igniteui-angular/src/lib/grids/cell.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,16 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
703703
}
704704
}
705705

706+
@HostBinding('attr.aria-rowindex')
707+
protected get ariaRowIndex(): number {
708+
return this.rowIndex + 1;
709+
}
710+
711+
@HostBinding('attr.aria-colindex')
712+
protected get ariaColIndex(): number {
713+
return this.visibleColumnIndex + 1;
714+
}
715+
706716
@ViewChild('defaultCell', { read: TemplateRef, static: true })
707717
protected defaultCellTemplate: TemplateRef<any>;
708718

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2016,6 +2016,28 @@ describe('IgxGrid Component Tests #grid', () => {
20162016
expect(grid.columns[1].field).toBe('firstName');
20172017
expect(grid.columns[2].field).toBe('lastName');
20182018
}));
2019+
2020+
it('should specify the correct aria-rowindex and aria-colindex attributes for cells', async () => {
2021+
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
2022+
fix.componentInstance.initColumnsRows(80, 20);
2023+
fix.detectChanges();
2024+
fix.detectChanges();
2025+
2026+
const grid = fix.componentInstance.grid;
2027+
2028+
grid.navigateTo(50, 16);
2029+
fix.detectChanges();
2030+
await wait();
2031+
fix.detectChanges();
2032+
2033+
const cell = grid.gridAPI.get_cell_by_index(50, 'col16');
2034+
// The following attributes indicate to assistive technologies which portions
2035+
// of the content are displayed in case not all are rendered,
2036+
// such as with the built-in virtualization of the grid. 1-based index.
2037+
expect(cell.nativeElement.getAttribute('aria-rowindex')).toBe('51');
2038+
expect(cell.nativeElement.getAttribute('aria-colindex')).toBe('17');
2039+
2040+
});
20192041
});
20202042

20212043
describe('IgxGrid - min/max width constraints rules', () => {

0 commit comments

Comments
 (0)