Grid is failing accessibility.

1 Answer 138 Views
Accessibility Grid Pager 
Ferg
Top achievements
Rank 1
Ferg asked on 19 May 2023, 09:03 AM | edited on 19 May 2023, 09:03 AM

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:

  • aria-required-children in Grid itself.
    image

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 no footerCell 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"
  • 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
  • aria-roles in footer cell which column has no footerCell 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

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

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.

1 Answer, 1 is accepted

Sort by
1
Filip
Telerik team
answered on 23 May 2023, 07:35 AM

Hi, Ferg,

Thank you for reaching out to us.

We will fix this issue as soon as possible, however, currently, we cannot commit to a specific ETA, once it has been fixed, the GitHub item will be updated accordingly.

Apologies for any inconvenience this issue might have caused you, I will set its priority today.

Regards,
Filip
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Ferg
Top achievements
Rank 1
commented on 24 May 2023, 03:01 AM

Thank you very much!
Tags
Accessibility Grid Pager 
Asked by
Ferg
Top achievements
Rank 1
Answers by
Filip
Telerik team
Share this question
or