feat(grid): correct aria attributes related to total rows/cols count and indexes

Author: ddaribo

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

@@ -705,12 +705,13 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
 
     @HostBinding('attr.aria-rowindex')
     protected get ariaRowIndex(): number {
-        return this.rowIndex + 1;
+        // +2 because aria-rowindex is 1-based and the first row is the header
+        return this.rowIndex + 2;
     }
 
     @HostBinding('attr.aria-colindex')
     protected get ariaColIndex(): number {
-        return this.visibleColumnIndex + 1;
+        return this.column.index + 1;
     }
 
     @ViewChild('defaultCell', { read: TemplateRef, static: true })

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

@@ -21,7 +21,7 @@ import { FilteringLogic } from '../../data-operations/filtering-expression.inter
 import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent } from '../../tabs/tabs/public_api';
 import { IgxGridRowComponent } from './grid-row.component';
 import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-strategy';
-import { GRID_SCROLL_CLASS } from '../../test-utils/grid-functions.spec';
+import { GRID_SCROLL_CLASS, GridFunctions } from '../../test-utils/grid-functions.spec';
 import { AsyncPipe } from '@angular/common';
 import { IgxPaginatorComponent, IgxPaginatorContentDirective } from '../../paginator/paginator.component';
 import { IGridRowEventArgs, IgxColumnGroupComponent, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
@@ -2005,26 +2005,31 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(grid.columns[2].field).toBe('lastName');
         }));
 
-        it('should specify the correct aria-rowindex and aria-colindex attributes for cells', async () => {
+        it('should set correct aria attributes related to total rows/cols count and indexes', async () => {
             const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
             fix.componentInstance.initColumnsRows(80, 20);
             fix.detectChanges();
             fix.detectChanges();
 
             const grid = fix.componentInstance.grid;
+            const gridHeader = GridFunctions.getGridHeader(grid);
+            const headerRowElement = gridHeader.nativeElement.querySelector('[role="row"]');
 
             grid.navigateTo(50, 16);
             fix.detectChanges();
             await wait();
             fix.detectChanges();
 
+            expect(headerRowElement.getAttribute('aria-rowindex')).toBe('1');
+            expect(grid.nativeElement.getAttribute('aria-rowcount')).toBe('81');
+            expect(grid.nativeElement.getAttribute('aria-colcount')).toBe('20');
+
             const cell = grid.gridAPI.get_cell_by_index(50, 'col16');
             // The following attributes indicate to assistive technologies which portions
             // of the content are displayed in case not all are rendered,
             // such as with the built-in virtualization of the grid. 1-based index.
-            expect(cell.nativeElement.getAttribute('aria-rowindex')).toBe('51');
+            expect(cell.nativeElement.getAttribute('aria-rowindex')).toBe('52');
             expect(cell.nativeElement.getAttribute('aria-colindex')).toBe('17');
-
         });
     });
 

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

@@ -47,6 +47,9 @@
         [attr.aria-label]="column.header || column.field"
         [attr.aria-expanded]="column.expanded"
         [attr.aria-selected]="column.selected"
+        [attr.aria-colindex]="column.index + 1"
+        [attr.aria-colspan]="column.children.length"
+        [attr.aria-rowindex]="1"
         [ngClass]="{
             'igx-grid-th--pinned-last': hasLastPinnedChildColumn,
             'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,

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

@@ -2,7 +2,7 @@
     [class.igx-grid__tr--mrl]="hasMRL">
 
     <!-- Column headers area -->
-    <div class="igx-grid__tr" role="row" [style.width.px]="width">
+    <div class="igx-grid__tr" role="row" [attr.aria-rowindex]="1" [style.width.px]="width">
 
         <!-- Left column moving area -->
         @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) {

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

@@ -79,6 +79,22 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
                 : this.sortDirection === SortingDirection.Desc ? 'descending' : null;
     }
 
+    /**
+     * @hidden
+     */
+    @HostBinding('attr.aria-colindex')
+    public get ariaColIndx() {
+        return this.column.index + 1;
+    }
+
+    /**
+     * @hidden
+     */
+    @HostBinding('attr.aria-rowindex')
+    public get ariaRowIndx() {
+        return 1;
+    }
+
     @HostBinding('class.igx-grid-th')
     public get columnGroupStyle() {
         return !this.column.columnGroup;