From 4c0b9fdb32699b53e69f6f5f33c74af8b9212d19 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 29 Jan 2026 11:11:18 +0000
Subject: [PATCH 1/3] Initial plan


From a68cd619975dd73eb79549f112f40deb3cfcb0ae Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 29 Jan 2026 11:14:13 +0000
Subject: [PATCH 2/3] Initial exploration - understanding accessibility issue

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>
---
 package-lock.json | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7fa7a167cb6..4bf06717776 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -386,8 +386,10 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -402,8 +404,10 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 14.18.0"
       },
@@ -506,8 +510,10 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -522,8 +528,10 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 14.18.0"
       },
@@ -656,8 +664,10 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
       "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -756,8 +766,10 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
       "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">= 14.18.0"
       },
@@ -22221,8 +22233,10 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -22274,8 +22288,10 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "extraneous": true,
+      "dev": true,
       "license": "ISC",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -22323,8 +22339,10 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -22336,8 +22354,10 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "extraneous": true,
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },

From 86b36f56291096c284856097ba8860b56af44896 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 29 Jan 2026 11:17:04 +0000
Subject: [PATCH 3/3] Fix ARIA accessibility violations in grid components

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>
---
 .../core/src/grouping/grid-group-by-area.component.ts    | 8 ++++++++
 .../core/src/headers/grid-header-row.component.html      | 2 +-
 .../grids/core/src/headers/grid-header-row.component.ts  | 6 ++++++
 .../grids/core/src/toolbar/grid-toolbar.component.ts     | 7 +++++++
 .../igniteui-angular/grids/grid/src/grid.component.html  | 4 ++--
 .../src/hierarchical-grid.component.html                 | 4 ++--
 .../grids/pivot-grid/src/pivot-grid.component.html       | 4 ++--
 .../tree-grid/src/tree-grid-group-by-area.component.ts   | 9 ++++++++-
 .../grids/tree-grid/src/tree-grid.component.html         | 4 ++--
 9 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts b/projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts
index e7a59842b03..0c8d846ba33 100644
--- a/projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts
+++ b/projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts
@@ -1,5 +1,6 @@
 import {
     Component,
+    HostBinding,
     Input,
 } from '@angular/core';
 import { IChipsAreaReorderEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips';
@@ -24,6 +25,13 @@ import { IGroupingExpression, ISortingExpression } from 'igniteui-angular/core';
     imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe]
 })
 export class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective {
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('attr.role')
+    public role = 'presentation';
+
     @Input()
     public sortingExpressions: ISortingExpression[] = [];
 
diff --git a/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.html b/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.html
index 261a1f203d9..c813accc4d8 100644
--- a/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.html
+++ b/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.html
@@ -1,4 +1,4 @@
-<div role="rowgroup" class="igx-grid-thead__wrapper" (scroll)="scroll($event)" [style.width.px]="width"
+<div class="igx-grid-thead__wrapper" (scroll)="scroll($event)" [style.width.px]="width"
     [class.igx-grid__tr--mrl]="hasMRL">
 
     <!-- Column headers area -->
diff --git a/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts b/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts
index a8fef047e5b..414cc912696 100644
--- a/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts
+++ b/projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts
@@ -62,6 +62,12 @@ export class IgxGridHeaderRowComponent implements DoCheck {
     @Input()
     public unpinnedColumnCollection: ColumnType[] = [];
 
+    /**
+     * @hidden @internal
+     */
+    @HostBinding('attr.role')
+    public role = 'rowgroup';
+
     @HostBinding('attr.aria-activedescendant')
     public get activeDescendant() {
         const activeElem = this.navigation.activeNode;
diff --git a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts
index 57ea58f5add..7ed8cd6685c 100644
--- a/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts
+++ b/projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts
@@ -88,6 +88,13 @@ export class IgxGridToolbarComponent implements OnDestroy {
     @HostBinding('class.igx-grid-toolbar')
     public defaultStyle = true;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('attr.role')
+    public role = 'presentation';
+
     protected _grid: GridType;
     protected sub: Subscription;
 
diff --git a/projects/igniteui-angular/grids/grid/src/grid.component.html b/projects/igniteui-angular/grids/grid/src/grid.component.html
index 9e96d118d99..d3baba2b8c3 100644
--- a/projects/igniteui-angular/grids/grid/src/grid.component.html
+++ b/projects/igniteui-angular/grids/grid/src/grid.component.html
@@ -199,7 +199,7 @@
     </div>
 </div>
 
-<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
+<div class="igx-grid__scroll" role="presentation" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
     <div class="igx-grid__scroll-start" [style.width.px]="pinnedStartWidth" [style.min-width.px]="pinnedStartWidth"></div>
     <div class="igx-grid__scroll-main" [style.width.px]="unpinnedWidth">
         <ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer>
@@ -208,7 +208,7 @@
     <div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pinnedEndWidth" [style.min-width.px]="pinnedEndWidth" [hidden]="pinnedEndWidth === 0"></div>
 </div>
 
-<div class="igx-grid__footer" #footer>
+<div class="igx-grid__footer" role="presentation" #footer>
     <ng-content select="igx-grid-footer,igc-grid-footer"></ng-content>
     <ng-content select="igx-paginator,igc-paginator"></ng-content>
 </div>
diff --git a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html
index e7683ef7c9b..a77294cf6ff 100644
--- a/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html
+++ b/projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html
@@ -166,7 +166,7 @@
     </div>
 </div>
 
-<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
+<div class="igx-grid__scroll" role="presentation" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
     <div class="igx-grid__scroll-start" [style.width.px]="pinnedStartWidth" [style.min-width.px]="pinnedStartWidth"></div>
     <div class="igx-grid__scroll-main" [style.width.px]="unpinnedWidth">
         <ng-template igxGridFor [igxGridForOf]="[]" #scrollContainer>
@@ -175,7 +175,7 @@
     <div class="igx-grid__scroll-end" [style.width.px]="pinnedEndWidth" [style.min-width.px]="pinnedEndWidth" [hidden]="pinnedEndWidth === 0"></div>
 </div>
 
-<div class="igx-grid__footer" #footer>
+<div class="igx-grid__footer" role="presentation" #footer>
     <ng-content select="igx-grid-footer,igc-grid-footer"></ng-content>
     <ng-content select="igx-paginator,igc-paginator"></ng-content>
     <ng-container #paginatorOutlet></ng-container>
diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html
index 558cf1c4721..1860acf5a00 100644
--- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html
+++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html
@@ -85,7 +85,7 @@
     <div #igxBodyOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
 </div>
 
-<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
+<div class="igx-grid__scroll" role="presentation" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
     <div class="igx-grid__scroll-start" [style.width.px]="pivotPinnedStartWidth" [style.min-width.px]="pivotPinnedStartWidth"></div>
     <div class="igx-grid__scroll-main" [style.width.px]="pivotUnpinnedWidth">
         <ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer>
@@ -97,7 +97,7 @@
 <div class="igx-grid__tfoot" role="rowgroup" #tfoot>
 </div>
 
-<div class="igx-grid__footer" #footer>
+<div class="igx-grid__footer" role="presentation" #footer>
     <ng-content select="igx-grid-footer,igc-grid-footer"></ng-content>
 </div>
 
diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-group-by-area.component.ts b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-group-by-area.component.ts
index f7a9ea6a6de..8a4ee625330 100644
--- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid-group-by-area.component.ts
+++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid-group-by-area.component.ts
@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, Input, IterableDiffer, IterableDiffers, OnDestroy, booleanAttribute, inject } from '@angular/core';
+import { AfterContentInit, Component, HostBinding, Input, IterableDiffer, IterableDiffers, OnDestroy, booleanAttribute, inject } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IChipsAreaReorderEventArgs, IgxChipComponent, IgxChipsAreaComponent } from 'igniteui-angular/chips';
@@ -23,6 +23,13 @@ import { IgxGroupAreaDropDirective, IgxGroupByAreaDirective, IgxGroupByMetaPipe
 export class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective implements AfterContentInit, OnDestroy {
     private differs = inject(IterableDiffers);
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @HostBinding('attr.role')
+    public role = 'presentation';
+
     @Input({ transform: booleanAttribute })
     public get hideGroupedColumns() {
         return this._hideGroupedColumns;
diff --git a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html
index bc331c85ae6..bc60127d186 100644
--- a/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html
+++ b/projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html
@@ -157,7 +157,7 @@
     </div>
 </div>
 
-<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
+<div class="igx-grid__scroll" role="presentation" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
     <div class="igx-grid__scroll-start" [style.width.px]='pinnedStartWidth' [style.min-width.px]='pinnedStartWidth'></div>
     <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
         <ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>
@@ -166,7 +166,7 @@
     <div class="igx-grid__scroll-end" [style.width.px]='pinnedEndWidth' [style.min-width.px]='pinnedEndWidth' [hidden]="pinnedEndWidth === 0"></div>
 </div>
 
-<div class="igx-grid__footer" #footer>
+<div class="igx-grid__footer" role="presentation" #footer>
     <ng-content select="igx-grid-footer,igc-grid-footer"></ng-content>
     <ng-content select="igx-paginator,igc-paginator"></ng-content>
 </div>