Copilot/fix accessibility issues 21.2.x

[viktorkombov]

Fix ARIA accessibility issues in igx-grid component

• Explore repository structure and locate grid component files
• Understand current ARIA role structure
• Analyze the specific accessibility violations
• Add proper ARIA role="rowgroup" to grid header row component
• Add role="presentation" to toolbar and group-by area components
• Add role="presentation" to scroll and footer containers
• Apply fixes to all grid types (grid, tree-grid, hierarchical-grid, pivot-grid)
• Build project successfully
• Run code review - no issues found
• Run security checks - passed
• Refactor: Move role="presentation" to base directive
• Document changes

Summary

This PR fixes WCAG 1.3.1 accessibility violations (aria-required-children) in all grid components. The changes ensure that elements with role="grid" only have direct children with allowed ARIA roles (row or rowgroup) per the ARIA specification.

Changes:

1. Added role="rowgroup" to header row components
2. Added role="presentation" to base IgxGroupByAreaDirective (inherited by grid and tree-grid variants)
3. Added role="presentation" to toolbar component
4. Added role="presentation" to scroll and footer containers
5. Applied fixes consistently across all grid variants (grid, tree-grid, hierarchical-grid, pivot-grid)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Accessibility Insights: Element has children which are not allowed: igx-grid-header-row[tabindex], div[tabindex], button[aria-haspopup], button[tabindex], [role=navigation], [role=button], [role=switch], [role=combobox]</issue_title>
<issue_description>## Description
Based on Accessibility Insights for Web, the following elements are not compliant: igxGrid

• igniteui-angular version: 19.2.24
• browser: Edge

Steps to reproduce

1. Install the Accessibility Insights extension for Edge
2. Create an example igx-grid table with columns, paginator and toolbar
3. Run the FastPass check from the notification Launch Pad

Result

What is the actual result after following the steps to reproduce?

We are seeing the following result:

Title: WCAG 1.3.1: Ensure elements with an ARIA role that require child roles contain them (#igxGrid)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensure elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: CO+I CSP - https://coi-cspw.azurefd.net/supplystore

Element path: #igxGrid

Snippet:

Related paths:
igx-grid-header-row
.igx-grid__tbody-content
.igx-grid__tfoot > div
.me-3
#clearFilters-btn
igx-page-nav
.date-picker-wrapper
button[name="btnColumnHiding"]
button[title="Open exporter dropdown"]
.h-100 > .menu-button.mdc-button--raised.mat-mdc-raised-button
#mat-mdc-slide-toggle-2-button
.input

How to fix:
Fix any of the following:
Element has children which are not allowed: igx-grid-header-row[tabindex], div[tabindex], button[aria-haspopup], button[tabindex], [role=navigation], [role=button], [role=switch], [role=combobox]

Environment: Microsoft Edge version 143.0.0.0

====

This accessibility issue was found using Accessibility Insights for Web 2.46.0 (axe-core 4.10.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Expected result

What is the expected result after following the steps to reproduce?
There should not be failed instances

Attachments

Attach a sample if available, and screenshots, if applicable.

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Accessibility Insights: Element has children which are not allowed: igx-grid-header-row[tabindex], div[tabindex], button[aria-haspopup], button[tabindex], [role=navigation], [role=button], [role=switch], [role=combobox] #16661

---

Known limitations (deferred — require structural refactoring):

igx-grid-toolbar, igx-group-by-area and igx-paginator are projected via
ng-content inside the grid host (role="grid"), making them owned
children of the grid in the accessibility tree. Full compliance would
require them to be siblings of role="grid".

[Copilot]

Pull request overview

This PR addresses WCAG 1.3.1 (aria-required-children) violations in Ignite UI Angular grid variants by adjusting the ARIA role hierarchy so role="grid" elements own only allowed roles (row / rowgroup) and by ensuring action wrappers inside rows have appropriate cell roles.

Changes:

• Update grid body/foot/scroll/footer containers across grid, tree grid, hierarchical grid, and pivot grid to use role="presentation" wrappers and role="rowgroup" focus hosts.
• Fix row/group-row action areas (drag indicator, row selectors, grouping toggle/content) to expose role="gridcell"/role="columnheader" where required.
• Add/adjust ARIA-focused tests to validate the new role structure.

Reviewed changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.spec.ts	Updates/extends tests to assert tbody/tfoot ARIA role structure.
projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html	Moves rowgroup semantics to focus host; makes wrappers presentational; updates scroll/footer roles.
projects/igniteui-angular/grids/tree-grid/src/tree-grid-row.component.html	Ensures row action wrappers expose role="gridcell".
projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html	Applies presentational wrappers and rowgroup roles in pivot grid body/scroll/footer (contains a merge conflict to resolve).
projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-row.component.html	Ensures row action wrappers expose role="gridcell".
projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.spec.ts	Updates/extends tests to assert tbody/tfoot ARIA role structure.
projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html	Moves rowgroup semantics to focus host; makes wrappers presentational; updates scroll/footer roles.
projects/igniteui-angular/grids/grid/src/groupby-row.component.ts	Moves role/expanded semantics to align group row with grid ARIA structure.
projects/igniteui-angular/grids/grid/src/groupby-row.component.html	Adds role="gridcell" to group row action wrappers; moves aria-expanded to toggle cell.
projects/igniteui-angular/grids/grid/src/grid.groupby.spec.ts	Updates/adds tests for group-row role and aria-expanded location/updates.
projects/igniteui-angular/grids/grid/src/grid.component.spec.ts	Updates/extends tests to assert tbody/tfoot ARIA role structure.
projects/igniteui-angular/grids/grid/src/grid.component.html	Moves rowgroup semantics to focus host; makes wrappers presentational; updates scroll/footer roles.
projects/igniteui-angular/grids/grid/src/grid-row.component.html	Ensures row action wrappers expose role="gridcell".
projects/igniteui-angular/grids/grid/src/grid-row-selection.spec.ts	Extends row selector tests to assert correct roles on selector wrappers.
projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts	Sets toolbar host to role="presentation" to avoid invalid grid-owned children.
projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts	Sets header row host to role="rowgroup".
projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.html	Adjusts header wrapper roles and assigns role="columnheader" to action containers.
projects/igniteui-angular/grids/core/src/grouping/group-by-area.directive.ts	Sets group-by area host to role="presentation".
projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-cell.component.ts	Sets filtering cell host to role="gridcell".