Fix ARIA grid structure violations for WCAG 1.3.1 compliance by Copilot · Pull Request #16823 · IgniteUI/igniteui-angular

Copilot · 2026-01-29T11:11:19Z

Fix ARIA accessibility issues in igx-grid component

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:

Added role="rowgroup" to header row components
Added role="presentation" to base IgxGroupByAreaDirective (inherited by grid and tree-grid variants)
Added role="presentation" to toolbar component
Added role="presentation" to scroll and footer containers
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

Install the Accessibility Insights extension for Edge

Create an example igx-grid table with columns, paginator and toolbar

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

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>

The ARIA spec for grid/treegrid composites defines a strict role hierarchy: grid -> rowgroup -> row -> gridcell/columnheader. This commit aligns the grid templates and components with that structure while preserving the existing keyboard navigation model. - Move role="rowgroup" from outer tbody/tfoot layout divs to the inner focus-host divs; outer wrappers receive role="presentation" — applies to grid, tree-grid, hierarchical-grid and pivot-grid - Add role="gridcell" to row-selector and drag-indicator wrappers in data rows (grid-row, tree-grid-row, hierarchical-row, groupby-row) - Add role="columnheader" to the equivalent wrappers in grid-header-row - Add role="row" to IgxGridGroupByRowComponent host (previously absent) and role="gridcell" to its toggle, content and selector children - Add role="row" to igx-grid-filtering-row host; wrap its children (input template, scroll arrows, chips area, action buttons) in role="gridcell" — scroll-arrow wrappers use display:contents to remain layout-transparent 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".

viktorkombov · 2026-03-12T18:11:03Z

The ARIA spec for grid/treegrid composites defines a strict role
hierarchy: grid -> rowgroup -> row -> gridcell/columnheader. The above commit
aligns the grid templates and components with that structure while
preserving the existing keyboard navigation model.

Move role="rowgroup" from outer tbody/tfoot layout divs to the inner
focus-host divs; outer wrappers receive role="presentation" — applies
to grid, tree-grid, hierarchical-grid and pivot-grid
Add role="gridcell" to row-selector and drag-indicator wrappers in
data rows (grid-row, tree-grid-row, hierarchical-row, groupby-row)
Add role="columnheader" to the equivalent wrappers in grid-header-row
Add role="row" to IgxGridGroupByRowComponent host (previously absent)
and role="gridcell" to its toggle, content and selector children
Add role="row" to igx-grid-filtering-row host; wrap its children
(input template, scroll arrows, chips area, action buttons) in
role="gridcell" — scroll-arrow wrappers use display:contents to
remain layout-transparent

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 by reshaping the ARIA grid ownership tree so that role="grid" elements own only row/rowgroup descendants, and non-grid UI is marked presentational.

Changes:

Move grid header row semantics to the header-row component host (role="rowgroup") and adjust header “action” cell roles.
Mark non-grid UI areas (toolbar, group-by area, scroll containers, footer) as role="presentation" across grid variants.
Ensure various row “action” UI wrappers participate as proper grid cells (role="gridcell"), and adjust body/footer rowgroup placement.

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
projects/igniteui-angular/grids/tree-grid/src/tree-grid.component.html	Adjusts body/tfoot/scroll/footer roles to avoid invalid grid-owned roles.
projects/igniteui-angular/grids/tree-grid/src/tree-grid-row.component.html	Adds `role="gridcell"` to row action wrappers (drag/selector).
projects/igniteui-angular/grids/tree-grid/src/tree-grid-group-by-area.component.ts	Sets group-by area host `role="presentation"`.
projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html	Adjusts body/scroll/tfoot/footer roles for pivot grid.
projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-row.component.html	Adds `role="gridcell"` to row action wrappers (drag/selector).
projects/igniteui-angular/grids/hierarchical-grid/src/hierarchical-grid.component.html	Adjusts body/tfoot/scroll/footer roles to avoid invalid grid-owned roles.
projects/igniteui-angular/grids/grid/src/groupby-row.component.ts	Adds host `role="row"` and changes where expanded state is exposed.
projects/igniteui-angular/grids/grid/src/groupby-row.component.html	Adds `role="gridcell"` wrappers and relocates `aria-expanded`.
projects/igniteui-angular/grids/grid/src/grid.component.html	Adjusts body/tfoot/scroll/footer roles and moves rowgroup responsibility to tbody-content.
projects/igniteui-angular/grids/grid/src/grid-row.component.html	Adds `role="gridcell"` to row action wrappers (drag/selector).
projects/igniteui-angular/grids/core/src/toolbar/grid-toolbar.component.ts	Sets toolbar host `role="presentation"`.
projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.ts	Sets header-row host `role="rowgroup"`.
projects/igniteui-angular/grids/core/src/headers/grid-header-row.component.html	Removes inner `rowgroup` role and adds header action cell roles.
projects/igniteui-angular/grids/core/src/grouping/grid-group-by-area.component.ts	Sets group-by area host `role="presentation"`.
projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-cell.component.ts	Sets filtering cell host `role="gridcell"`.
package-lock.json	Lockfile metadata changes (appears unrelated to ARIA work).

You can also share your feedback on Copilot code review. Take the survey.

ChronosSF · 2026-03-13T08:48:35Z

@viktorkombov , thank you! Please clean up the PR (resolve conflicts) and address or dismiss Copilot comments then I can verify it and communicate with the user who reported it.

…oups

…ibility

…into copilot/fix-accessibility-issues

…tion or class' Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

ChronosSF · 2026-03-18T15:56:24Z

+     * @internal
+     */
+    @HostBinding('attr.role')
+    public role = 'presentation';


can be added to IgxGroupByAreaDirective instead

Done. Moved role="presentation" binding to IgxGroupByAreaDirective base class in commit 6d571a0.

ChronosSF · 2026-03-18T15:56:35Z

+     * @internal
+     */
+    @HostBinding('attr.role')
+    public role = 'presentation';


can be added to IgxGroupByAreaDirective instead

Done. Moved role="presentation" binding to IgxGroupByAreaDirective base class in commit 6d571a0.

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>

Initial plan

4c0b9fd

Copilot AI assigned Copilot and ChronosSF Jan 29, 2026

Copilot started work on behalf of ChronosSF January 29, 2026 11:11 View session

Copilot AI and others added 2 commits January 29, 2026 11:14

Initial exploration - understanding accessibility issue

a68cd61

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>

Fix ARIA accessibility violations in grid components

86b36f5

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix accessibility compliance for igx-grid components~~ Fix ARIA grid structure violations for WCAG 1.3.1 compliance Jan 29, 2026

Copilot AI requested a review from ChronosSF January 29, 2026 11:23

Copilot finished work on behalf of ChronosSF January 29, 2026 11:23

viktorkombov self-requested a review March 11, 2026 13:46

viktorkombov self-assigned this Mar 11, 2026

viktorkombov requested a review from Copilot March 12, 2026 18:11

Copilot started reviewing on behalf of viktorkombov March 12, 2026 18:12 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

viktorkombov added 6 commits March 13, 2026 11:15

fix(pivot-grid): enhance accessibility by adding ARIA roles to row gr…

3f97adf

…oups

fix(grid-header): add ARIA role to column headers for improved access…

7adbc82

…ibility

chore(*): enable trial watermark

6838acd

Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular …

d92e3c8

…into copilot/fix-accessibility-issues

chore(*): mark row role HostBinding as @hidden @internal

ce0233d

test(grids): update unit tests to match updated ARIA roles

2a847fb

viktorkombov marked this pull request as ready for review March 13, 2026 10:16

github-code-quality Bot found potential problems Mar 13, 2026

View reviewed changes

Comment thread projects/igniteui-angular/grids/grid/src/grid.component.spec.ts Fixed

viktorkombov added ❌ status: awaiting-test PRs awaiting manual verification grid: tree-grid grid: hierarchical-grid aria-support grid: pivot labels Mar 13, 2026

viktorkombov added grid version: 21.1.x labels Mar 13, 2026

viktorkombov and others added 2 commits March 13, 2026 12:20

Potential fix for pull request finding 'Unused variable, import, func…

c1ce108

…tion or class' Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>

Merge branch 'master' into copilot/fix-accessibility-issues

f3199d1

ChronosSF requested changes Mar 18, 2026

View reviewed changes

ChronosSF added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Mar 18, 2026

Copilot started work on behalf of ChronosSF March 18, 2026 15:57 View session

refactor: move role="presentation" to base IgxGroupByAreaDirective

6d571a0

Co-authored-by: ChronosSF <2188411+ChronosSF@users.noreply.github.com>

Copilot AI requested a review from ChronosSF March 18, 2026 16:03

Copilot finished work on behalf of ChronosSF March 18, 2026 16:03

ChronosSF approved these changes Mar 18, 2026

View reviewed changes

ChronosSF and others added 3 commits March 19, 2026 17:41

Merge branch 'master' into copilot/fix-accessibility-issues

0c45706

chore(*): updating package lock for ci

2e31d3a

Merge branch 'master' into copilot/fix-accessibility-issues

29c9b7f

ChronosSF approved these changes Mar 23, 2026

View reviewed changes

Merge branch 'master' into copilot/fix-accessibility-issues

f046b23

kdinev approved these changes Apr 17, 2026

View reviewed changes

Merge branch 'master' into copilot/fix-accessibility-issues

e85f8dd

viktorkombov approved these changes May 7, 2026

View reviewed changes

ChronosSF merged commit 4f4f549 into master May 7, 2026
6 checks passed

ChronosSF deleted the copilot/fix-accessibility-issues branch May 7, 2026 15:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix ARIA grid structure violations for WCAG 1.3.1 compliance#16823

Fix ARIA grid structure violations for WCAG 1.3.1 compliance#16823
ChronosSF merged 18 commits into
masterfrom
copilot/fix-accessibility-issues

Copilot AI commented Jan 29, 2026 •

edited

Loading

Uh oh!

viktorkombov commented Mar 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ChronosSF commented Mar 13, 2026

Uh oh!

Uh oh!

ChronosSF Mar 18, 2026

Uh oh!

Copilot AI Mar 18, 2026

Uh oh!

ChronosSF Mar 18, 2026

Uh oh!

Copilot AI Mar 18, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

Copilot AI commented Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fix ARIA accessibility issues in igx-grid component

Summary

Changes:

Steps to reproduce

Result

Expected result

Attachments

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

Uh oh!

viktorkombov commented Mar 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ChronosSF commented Mar 13, 2026

Uh oh!

Uh oh!

ChronosSF Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

ChronosSF Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Copilot AI commented Jan 29, 2026 •

edited

Loading