Issues reported in GitHub too. Grid is failing accessibility. · Issue #1575 · telerik/kendo-react (github.com)
During accessibility testing, there are 5 violations. The violations are:
And when add footerCell
to only some of the columns, elements in .k-grid-footer
have several violations
aria-allowed-attr
in footer cell which column has nofooterCell
property.- Path:
.k-table-td[aria-colindex="1"][role="columnfooter"]
- Snippet:
<td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
- How to fix: ARIA attribute is not allowed: aria-selected="false"
- Path:
aria-allowed-role
in colgroup in footer.- Path:
.k-grid-footer-table > colgroup
- Snippet:
<colgroup role="presentation">
- How to fix: ARIA role presentation is not allowed for given element
- Path:
aria-roles
in footer cell which column has nofooterCell
property.- Path:
.k-table-td[aria-colindex="1"][role="columnfooter"]
- Snippet:
<td class="k-table-td" role="columnfooter" aria-selected="false" aria-colindex="1"></td>
- How to fix: Role must be one of the valid ARIA roles: columnfooter
- Path:
In pagination, the pageSize selector also have a violation.
aria-input-field-name
: I guess it's because the span element have an input type role, but didn't meet the needs of an input.- Path:
.k-pager-sizes > .k-dropdownlist.k-picker-solid[role="combobox"]
- Snippet:
<span class="k-dropdownlist k-picker k-picker-md k-rounded-md k-picker-solid" tabindex="0" role="combobox" aria-required="false" aria-haspopup="listbox" aria-expanded="false" aria-owns="d22e899f-3cc6-49c4-a4d2-d6153e17a2f6" aria-describedby="ea34d15b-a71a-48fa-a95d-d773f6fcb50a">
- How to fix:
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute
- Path:
Package version: "@progress/kendo-react-grid": "^5.11.0"
. By the way, I checked the changelog and there is no related update.
Thanks for your help.