fix(grid-column-groups, pivot): render a hidden row w/ headers for a11y

Author: ddaribo

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

@@ -517,11 +517,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     /** @hidden @internal */
     @HostBinding('attr.aria-describedby')
     public get ariaDescribeBy() {
-        let describeBy = (this.gridID + '_' + this.column.field).replace('.', '_');
-        if (this.isInvalid) {
-            describeBy += ' ' + this.ariaErrorMessage;
-        }
-        return describeBy;
+        return this.isInvalid ? this.ariaErrorMessage : null;
     }
 
     /** @hidden @internal */

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

@@ -145,6 +145,63 @@ describe('IgxGrid - multi-column headers #grid', () => {
 
         }));
 
+        it('Should render a hidden row of the leaf column headers for accessibility purposes.', fakeAsync(() => {
+            fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
+            (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.firstGroupRepeats = 0;
+            (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.secondGroupRepeats = 0;
+            tick();
+            fixture.detectChanges();
+
+            grid = fixture.componentInstance.grid;
+            const gridHeader = GridFunctions.getGridHeader(grid);
+
+            const groupHeaderEls = Array.from(gridHeader.nativeElement.querySelectorAll('.' + GRID_COL_GROUP_THEAD_TITLE_CLASS));
+            for (const header of groupHeaderEls) {
+                expect(header.getAttribute('aria-hidden')).toBe('true');
+            }
+
+            const columnHeaders = GridFunctions.getColumnHeaders(fixture);
+            for (const header of columnHeaders) {
+                expect(header.nativeNode.getAttribute('aria-hidden')).toBe('true');
+            }
+
+            const hiddenRow = gridHeader.nativeElement.querySelectorAll('[role="row"]')[1];
+            const horizontalVirtualization = grid.rowList.first.virtDirRow;
+            const chunkSize = horizontalVirtualization.state.chunkSize;
+
+            expect(hiddenRow.children.length).toBeLessThanOrEqual(chunkSize);
+            expect(grid.columns.length).toBeGreaterThan(chunkSize);
+
+            expect(hiddenRow.children[0].textContent).toBe('ID');
+            expect(hiddenRow.children[1].textContent).toBe('Company Name');
+            expect(hiddenRow.children[2].textContent).toBe('ContactName');
+            expect(hiddenRow.children[3].textContent).toBe('ContactTitle');
+            expect(hiddenRow.children[4].textContent).toBe('Country');
+            expect(hiddenRow.children[5].textContent).toBe('Region');
+            expect(hiddenRow.children[6].textContent).toBe('City');
+        }));
+
+        it('The hidden row of the leaf columns contains only headers of the rendered cells', fakeAsync(() => {
+            fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
+            tick();
+            fixture.detectChanges();
+
+            grid = fixture.componentInstance.grid;
+            const horizontalVirtualization = grid.rowList.first.virtDirRow;
+            const chunkSize = horizontalVirtualization.state.chunkSize;
+
+            tick();
+            fixture.detectChanges();
+
+            const gridHeader = GridFunctions.getGridHeader(grid);
+            const hiddenRow = gridHeader.nativeElement.querySelectorAll('[role="row"]')[1];
+
+            expect(hiddenRow.children.length).toBeLessThanOrEqual(chunkSize);
+            for (const ariaHeader of Array.from(hiddenRow.children)) {
+                expect(ariaHeader.textContent).toBe('ID');
+            }
+        }));
+
         it('Should render dynamic column group header correctly (#12165).', () => {
             fixture = TestBed.createComponent(BlueWhaleGridComponent) as ComponentFixture<BlueWhaleGridComponent>;
             (fixture as ComponentFixture<BlueWhaleGridComponent>).componentInstance.firstGroupRepeats = 1;

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

@@ -42,6 +42,7 @@
     }
     <div class="igx-grid-thead__title"
         role="columnheader"
+        [attr.aria-hidden]="ariaHidden"
         [attr.aria-label]="column.header || column.field"
         [attr.aria-expanded]="column.expanded"
         [attr.aria-selected]="column.selected"
@@ -97,6 +98,7 @@
     }
     <igx-grid-header
         role="columnheader"
+        [attr.aria-hidden]="ariaHidden"
         class="igx-grid-th--fw"
         [id]="grid.id + '_' + column.field"
         [ngClass]="column.headerClasses"

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

@@ -158,6 +158,13 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
         return Z_INDEX - this.grid.pinnedColumns.indexOf(this.column);
     }
 
+    /**
+     * @hidden
+     */
+    public get ariaHidden(): boolean {
+        return this.grid.hasColumnGroups && (this.column.hidden || this.grid.navigation.activeNode.row !== -1);
+    }
+
     /**
      * Gets whether the header group belongs to a column that is filtered.
      *

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

@@ -106,6 +106,15 @@
         }
     </div>
 
+    <!-- Render a hidden row of the leaf column headers for accessibility purposes -->
+    @if (grid.hasColumnGroups) {
+        <div role="row" style="width: 0; height: 0; position: absolute; top: -10000px;">
+            @for (column of visibleLeafColumns; track column.field) {
+                <div role="columnheader" [attr.aria-hidden]="isLeafHeaderAriaHidden">{{ column.header || column.field }}</div>
+            }
+        </div>
+    }
+
     <!-- Filter row area -->
     @if (grid.filteringService.isFilterRowVisible) {
         <igx-grid-filtering-row #filteringRow

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

@@ -93,6 +93,26 @@ export class IgxGridHeaderRowComponent implements DoCheck {
         return this.groups.map(group => group.filter);
     }
 
+    /**
+     * Gets a list of all visible leaf columns in the grid.
+     *
+     * @hidden @internal
+     */
+    public get visibleLeafColumns(): ColumnType[] {
+        const row = this.grid.gridAPI.get_row_by_index(this.grid.rowList.first?.index || 0);
+        if (row && row.cells) {
+            return row.cells.map(cell => cell.column);
+        }
+    }
+
+    /**
+    * @hidden
+    * @internal
+    */
+    public get isLeafHeaderAriaHidden(): boolean {
+        return this.grid.navigation.activeNode.row === -1;
+    }
+
     /** The virtualized part of the header row containing the unpinned header groups. */
     @ViewChild('headerVirtualContainer', { read: IgxGridForOfDirective, static: true })
     public headerContainer: IgxGridForOfDirective<ColumnType, ColumnType[]>;

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

@@ -310,6 +310,13 @@
                 }
             }
         </div>
+
+        <!-- Render a hidden row of the leaf column headers for accessibility purposes -->
+        <div role="row" style="width: 0; height: 0; position: absolute; top: -10000px;">
+            @for (column of visibleLeafColumns; track column.field) {
+                <div role="columnheader" [attr.aria-hidden]="isLeafHeaderAriaHidden">{{ column.header || column.field }}</div>
+            }
+        </div>
     </div>
 </div>
 <!-- Header thumb area -->

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

@@ -203,6 +203,14 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
         return this.totalDepth * this.grid.renderedRowHeight;
     }
 
+    /**
+    * @hidden
+    * @internal
+    */
+    public override get isLeafHeaderAriaHidden(): boolean {
+        return super.isLeafHeaderAriaHidden || this.grid.navigation.isRowHeaderActive || this.grid.navigation.isRowDimensionHeaderActive;
+    }
+
     /**
     * @hidden
     * @internal