Fix ARIA grid structure violations for WCAG 1.3.1 compliance

[Copilot]

Accessibility Insights flagged WCAG 1.3.1 violations: elements with role="grid" had direct children with invalid ARIA roles (navigation, button, combobox, switch) instead of the required row or rowgroup.

Changes

Header row component

• Moved role="rowgroup" from inner wrapper div to component host binding
• Pivot header row inherits this fix

Non-grid UI elements

• Added role="presentation" to toolbar, group-by area, scroll containers, and footer
• Excludes these elements from the grid's accessibility tree

Scope

• Applied consistently across grid, tree-grid, hierarchical-grid, and pivot-grid

Structure Before/After

<!-- Before: Invalid ARIA tree -->
<igx-grid role="grid">
  <igx-grid-toolbar>...</igx-grid-toolbar>  ❌ Children have role="button", "navigation"
  <igx-grid-header-row>                      ❌ No role
    <div role="rowgroup">...</div>
  </igx-grid-header-row>
</igx-grid>

<!-- After: Valid ARIA tree -->
<igx-grid role="grid">
  <igx-grid-toolbar role="presentation">...</igx-grid-toolbar>  ✓ Excluded from a11y tree
  <igx-grid-header-row role="rowgroup">                         ✓ Valid child
    <div>...</div>
  </igx-grid-header-row>
</igx-grid>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www.w3.org
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

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

---

💡 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.