fix(pivot): headers activedescendants & clean up redundant row/rowgroup roles

ddaribo · ddaribo · commit da7510075def · 2025-08-07T15:39:19.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -5,7 +5,6 @@
 <igx-pivot-header-row class="igx-grid-thead igx-grid-thead--pivot" tabindex="0"
     [grid]="this"
     [hasMRL]="hasColumnLayouts"
-    [activeDescendant]="activeDescendant"
     [width]="calcWidth"
     [pinnedColumnCollection]="pinnedColumns"
     [unpinnedColumnCollection]="unpinnedColumns"
@@ -19,7 +18,7 @@
 
 <div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
     <ng-container *ngTemplateOutlet="rowDimensions.length ? (hasHorizontalLayout ? horizontalRowDimensionsTemplate : defaultRowDimensionsTemplate) : emptyRowDimensionsTemplate; context: this"></ng-container>
-    <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
+    <div class="igx-grid__tbody-content" tabindex="0"  [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
         (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
         [style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody [attr.aria-activedescendant]="activeDescendant">
@@ -139,7 +138,8 @@
 
 <ng-template #defaultRowDimensionsTemplate>
     @for (dim of rowDimensions; track dim.memberName; let dimIndex = $index) {
-        <div tabindex="0" [style.height.px]="totalHeight" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+        <div tabindex="0" [style.height.px]="totalHeight" #rowDimensionContainer class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)"
+            [attr.aria-activedescendant]="headerRowActiveDescendant">
             <ng-template igxGridFor let-rowData
                 [igxGridForOf]="dataView | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger"
                 let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
@@ -149,7 +149,7 @@
                 #verticalRowDimScrollContainer
             >
                 <igx-pivot-row-dimension-content
-                    role="row" class="igx-grid-thead" [grid]="this"
+                    class="igx-grid-thead" [grid]="this"
                     [dimension]="rowData.dimensions[dimIndex]"
                     [rootDimension]="dim"
                     [style.height.px]="renderedRowHeight * (rowData.rowSpan || 1)"
@@ -163,7 +163,8 @@
 </ng-template>
 
 <ng-template #horizontalRowDimensionsTemplate>
-    <div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+    <div tabindex="0" class="igx-grid__tbody-pivot-mrl-dimension" #rowDimensionContainer [style.height.px]="totalHeight" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)"
+        [attr.aria-activedescendant]="headerRowActiveDescendant">
         @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) {
             <ng-template #verticalRowDimScrollContainer role="rowgroup" igxGridFor let-rowGroup let-rowIndex="index"
                 [igxGridForOf]="groupedData"
@@ -181,9 +182,10 @@
 </ng-template>
 
 <ng-template #emptyRowDimensionsTemplate>
-    <div tabindex="0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+    <div tabindex="0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)"
+        [attr.aria-activedescendant]="headerRowActiveDescendant">
         @if ((columnDimensions.length > 0 || values.length > 0) && data.length > 0) {
-            <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
+            <igx-pivot-row-dimension-content class="igx-grid-thead" [grid]="this"
                 [dimension]="emptyRowDimension"
                 [rootDimension]="emptyRowDimension"
                 [rowIndex]="0" [rowData]="dataView[0]"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -391,7 +391,6 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     @HostBinding('attr.role')
     public role = 'grid';
 
-
     /**
      * Enables a super compact theme for the component.
      * @remarks
@@ -446,6 +445,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     @ViewChild('record_template', { read: TemplateRef, static: true })
     public recordTemplate: TemplateRef<any>;
 
+    /**
+     * @hidden @internal
+     */
+    @ViewChild(IgxPivotRowDimensionMrlRowComponent, { read: IgxPivotRowDimensionMrlRowComponent })
+    public rowDimensionMrlComponent: IgxPivotRowDimensionMrlRowComponent;
+
     /**
      * @hidden @internal
      */
@@ -2072,17 +2077,27 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
 
     /** @hidden @internal */
     public override get activeDescendant() {
-        const activeElem = this.navigation.activeNode;
-        if ((this.navigation as IgxPivotGridNavigationService).isRowHeaderActive ||
-            (this.navigation as IgxPivotGridNavigationService).isRowDimensionHeaderActive) {
-            if (!activeElem || !Object.keys(activeElem).length) {
-                return this.id;
-            }
+        if (this.navigation.isRowHeaderActive || this.navigation.isRowDimensionHeaderActive) {
+            return null;
+        }
+        return super.activeDescendant;
+    }
 
-            return `${this.id}_${activeElem.row}_${activeElem.column}`;
+    /** @hidden @internal */
+    public get headerRowActiveDescendant() {
+        const activeElem = this.navigation.activeNode;
+        if (!activeElem || !Object.keys(activeElem).length || !this.navigation.isRowHeaderActive) {
+            return null;
         }
 
-        return super.activeDescendant;
+        const rowDimensions = this.rowDimensionContentCollection.length > 0 ?
+            this.rowDimensionContentCollection.toArray() :
+            this.rowDimensionMrlComponent.rowDimensionContentCollection.toArray();
+
+        const rowDimensionContentActive = rowDimensions.find(rd => rd && rd.headerGroups?.some(hg => hg.active));
+        const activeHeader = rowDimensionContentActive?.headerGroups.toArray().find(hg => hg.active);
+
+        return activeHeader ? `${this.id}_${activeHeader.title}` : null;
     }
 
     protected resolveToggle(groupColumn: IgxColumnComponent, state: boolean) {
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
@@ -194,7 +194,7 @@
         </div>
     </div>
     <div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
-         [attr.aria-activedescendant]="activeDescendant" [class.igx-grid__tr--mrl]="hasMRL">
+        [class.igx-grid__tr--mrl]="hasMRL">
 
         <!-- Column headers area -->
         <div class="igx-grid__tr" role="row" [style.width.px]="width">
@@ -248,7 +248,7 @@
             }
 
             @if (grid.pivotUI.showRowHeaders && grid.rowDimensions.length > 0) {
-                <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="grid.pivotRowWidths - 1">
+                <div class="igx-grid__tr igx-grid__tr-header-row" [style.width.px]="grid.pivotRowWidths - 1">
                     @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) {
                         @if (getRowDimensionColumn(dim); as dimCol) {
                             <igx-pivot-row-header-group #rowDimensionHeaders
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts
@@ -9,7 +9,8 @@ import {
     Renderer2,
     ViewChild,
     SimpleChanges,
-    ViewChildren
+    ViewChildren,
+    HostBinding
 } from '@angular/core';
 import { IBaseChipEventArgs, IgxChipComponent } from '../../chips/chip.component';
 import { IgxChipsAreaComponent } from '../../chips/chips-area.component';
@@ -37,8 +38,6 @@ import { IgxIconComponent } from '../../icon/icon.component';
 import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component';
-import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component';
-import { GridColumnDataType } from '../../data-operations/data-util';
 
 /**
  *
@@ -128,12 +127,31 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     * @internal
     */
     @ViewChildren('rowDimensionHeaders')
-    public rowDimensionHeaders: QueryList<IgxPivotRowDimensionHeaderGroupComponent>;
+    public rowDimensionHeaders: QueryList<IgxPivotRowHeaderGroupComponent>;
 
     public override get headerForOf() {
         return this.headerContainers?.last;
     }
 
+    @HostBinding('attr.aria-activedescendant')
+    public override get activeDescendant(): string {
+        const activeElem = this.navigation.activeNode;
+        if (!activeElem || !Object.keys(activeElem).length || this.grid.navigation.headerRowActiveDescendant) {
+            return null;
+        }
+
+        if (this.navigation.isRowDimensionHeaderActive) {
+            const activeHeader = this.grid.theadRow.rowDimensionHeaders.find(h => h.active);
+            if (activeHeader) {
+                const key = activeHeader.title ?? activeHeader.rootDimension?.memberName;
+                return key ? `${this.grid.id}_${key}` : null;
+            }
+            return null;
+        }
+
+        return super.activeDescendant;
+    }
+
     constructor(
         @Inject(IGX_GRID_BASE) public override grid: PivotGridType,
         ref: ElementRef<HTMLElement>,
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-content.component.html
@@ -1,4 +1,4 @@
-<div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
+<div class="igx-grid-thead__wrapper" [style.width.px]="width"
     [class.igx-grid__tr--mrl]="hasMRL">
     <div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="width">
             <igx-pivot-row-dimension-header-group [ngClass]="rowDimensionColumn.headerGroupClasses"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html
@@ -14,9 +14,9 @@
         <span class="igx-grid-th__drop-indicator-left"></span>
     }
     <igx-pivot-row-dimension-header
-        role="columnheader"
+        [attr.role]="role"
         class="igx-grid-th--fw"
-        [id]="grid.id + '_' + column.field"
+        [id]="grid.id + '_' + header ? header.title : column.field"
         [ngClass]="column.headerClasses"
         [ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
         [igxColumnMovingDrag]="column"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts
@@ -32,6 +32,13 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
     @HostBinding('style.user-select')
     public userSelect = 'none';
 
+    /**
+     * @hidden
+     */
+    public get role(): string {
+        return 'rowheader';
+    }
+
     constructor(private cdRef: ChangeDetectorRef,
         @Inject(IGX_GRID_BASE) public override grid: PivotGridType,
         private elementRef: ElementRef<HTMLElement>,
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.html
@@ -2,7 +2,7 @@
     cell of rowGroup | pivotGridHorizontalRowCellMerging:grid.pivotConfiguration:grid.pipeTrigger;
     track getGroupKey(cell); let cellIndex = $index
 ) {
-    <igx-pivot-row-dimension-content role="row" class="igx-grid-thead"
+    <igx-pivot-row-dimension-content class="igx-grid-thead"
         [grid]="grid"
         [dimension]="cell.rootDimension"
         [rootDimension]="cell.rootDimension"
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts
@@ -34,6 +34,8 @@ import { PivotUtil } from './pivot-util';
     imports: [IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging]
 })
 export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent {
+    @ViewChildren(IgxPivotRowDimensionContentComponent)
+    public rowDimensionContentCollection: QueryList<IgxPivotRowDimensionContentComponent>;
 
     @HostBinding('class.igx-grid__tbody-pivot-dimension')
     public pivotDim = true;
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts
@@ -31,6 +31,13 @@ export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent
     @HostBinding('style.user-select')
     public userSelect = 'none';
 
+    /**
+     * @hidden
+     */
+    public get role(): string {
+        return 'columnheader';
+    }
+
     constructor(private cdRef: ChangeDetectorRef,
         @Inject(IGX_GRID_BASE) public override grid: PivotGridType,
         private elementRef: ElementRef<HTMLElement>,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"`
	`1`	`+<div class="igx-grid-thead__wrapper" [style.width.px]="width"`
`2`	`2`	`[class.igx-grid__tr--mrl]="hasMRL">`
`3`	`3`	`<div class="igx-grid__tr igx-grid__tr-header-row" role="row" [style.width.px]="width">`
`4`	`4`	`<igx-pivot-row-dimension-header-group [ngClass]="rowDimensionColumn.headerGroupClasses"`