Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Grid] Wai-Aria Accessibility issues #1575

Closed
jiaopi404 opened this issue May 19, 2023 · 1 comment
Closed

[Grid] Wai-Aria Accessibility issues #1575

jiaopi404 opened this issue May 19, 2023 · 1 comment
Assignees
Labels
a11y Item which represents accessibility compliance Bug Item which indicates that something is not working pkg:Grid SEV: Medium

Comments

@jiaopi404
Copy link

jiaopi404 commented May 19, 2023

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.

@jiaopi404 jiaopi404 changed the title Grid is failing accessibility when set footerCell only to some of the columns. Grid is failing accessibility. May 19, 2023
@filipKovachev filipKovachev added a11y Item which represents accessibility compliance Bug Item which indicates that something is not working pkg:Grid SEV: Medium Priority 1 labels May 25, 2023
@jivanova jivanova changed the title Grid is failing accessibility. [Grid] Wai-Aria Accessibility issues Aug 4, 2023
@elena-gancheva elena-gancheva added this to the [R3 2023] PI 2 milestone Aug 4, 2023
@WissamProgress
Copy link
Collaborator

Reported in Ticket ID: 1623134

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Item which represents accessibility compliance Bug Item which indicates that something is not working pkg:Grid SEV: Medium
Projects
None yet
Development

No branches or pull requests

6 participants