Duplicated
Last Updated: 11 Aug 2026 12:48 by ADMIN
Jeremi
Created on: 11 Aug 2026 11:13
Category: UI for Blazor
Type: Bug Report
1
Grid `role="grid"` fails Lighthouse `aria-required-children`
# 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:
0 comments