Last Updated:
11 Aug 2026 12:48
by ADMIN
# Bug report: Grid `role="grid"` fails Lighthouse `aria-required-children`
**Product:** Telerik UI for Blazor
**Component:** Grid
**Version:** 14.0
**Detection tool:** Google Lighthouse — Accessibility audit (Chrome DevTools)
**Related feedback item:** [#1601296 – "[Accessibility] Ensure elements with ARIA roles have all required ARIA attributes"](https://feedback.telerik.com/blazor/1601296-accessibility-ensure-elements-with-aria-roles-have-all-required-aria-attributes) (currently Unplanned)
---
## Description
The Grid renders its accessibility root (`div.k-grid-aria-root`) with
`role="grid"`, but the required child roles (`rowgroup` / `row`) are not reachable
from it. As a result, the **Lighthouse Accessibility audit** reports a failing
`aria-required-children` audit:
> "Elements with an ARIA [role] that require children to contain a specific
> [role] are missing some or all of those required children."
Lighthouse's Accessibility category is powered by axe-core, so this corresponds
to the axe rule **`aria-required-children`** (WCAG 2.1 SC 1.3.1, Level A).
This appears to be the same underlying problem tracked in #1601296. This report
adds a clean, Lighthouse-based reproduction in case it is useful for
prioritization.
## Steps to reproduce
1. Create a page with a `<TelerikGrid>` bound to any data source (a few rows is
enough).
2. Open the page in Chrome.
3. Open DevTools → **Lighthouse** tab.
4. Select the **Accessibility** category and click **Analyze page load**.
5. In the report, expand the failing **`aria-required-children`** audit.
## Expected behavior
The Lighthouse Accessibility audit passes. The element carrying `role="grid"`
exposes valid `rowgroup` / `row` children (or the intermediate wrapper elements
carry `role="presentation"` so the grid → row ownership chain is preserved).
## Actual behavior
The `aria-required-children` audit fails. Lighthouse flags the grid root and
cites `div.k-grid-content` as the element interrupting the required-children
chain.
**Rendered markup (abridged):**
```html
<div class="k-grid-aria-root" role="grid" aria-rowcount="52" aria-label="Data table">
...
<div class="k-grid-content" tabindex="-1"> <!-- no role; sits directly on the <table> -->
<table class="k-grid-table">
<tbody>
<tr role="row"> ... </tr>
</tbody>
</table>
</div>
</div>
```
## Analysis
`role="grid"` must own `rowgroup` / `row` descendants. In the rendered DOM the
rows live inside a native `<table>` (implicit `role="table"`), and the wrapper
`<div>`s between the grid root and the table (`k-grid-container`,
`k-grid-content`) carry no ARIA role. This breaks the `grid → row` ownership
chain that axe-core (and therefore Lighthouse) requires. `k-grid-content` is
specifically cited because its `tabindex="-1"` makes it a focusable,
non-transparent node sitting directly above the table.
Duplicated
This item is a duplicate of an already existing item. You can find the original item here: