Accessibility Issues with Kendo UI Components after Upgrade

[tbezawada-git]

Description:
We are experiencing accessibility issues with Kendo UI components both in older and the latest versions..
Environment:

Initial Kendo UI Package Versions:

@progress/kendo-datasource-vue-wrapper: ^2018.3.1018
@progress/kendo-dateinputs-vue-wrapper: ^2018.2.620
@progress/kendo-grid-vue-wrapper: ^2018.2.620
@progress/kendo-theme-bootstrap: ^2.11.9
@progress/kendo-ui: ^2018.1.226
Updated Kendo UI Package Versions:

@progress/kendo-datasource-vue-wrapper: ^2023.3.1010
@progress/kendo-dateinputs-vue-wrapper: ^2023.3.1010
@progress/kendo-grid-vue-wrapper: ^2023.3.1010
@progress/kendo-theme-bootstrap: ^7.0.2
@progress/kendo-ui: ^2023.3.1114

Vue Version: 2.7.16

Bootstrap Version: 4.1.1

Issue Details:

Accessibility Tags: We noticed that the grid/pagination components have accessibility tags added in the updated version.

Accessibility Error: The issue reported by accessibility testing tools (such as Allicat) is: "Ensures elements with an ARIA role that require parent roles are contained by them. Required ARIA parent roles not present: menu, menubar, group."

Existing Issue: Even after updating to the latest versions, we are still encountering issues where menuitem and menuitemradio roles need a parent role.

Steps to reproduce:

• Update the Kendo UI packages to the versions mentioned above.
• Check the UI components for accessibility tags.
• Run accessibility tests using tools like Allicat.

Additional context
We have tested the updated packages locally and ran accessibility tests using AllyCAT, but the issue persists.

We would appreciate any guidance or workarounds to resolve these issues without having to make extensive changes to our codebase.

[iadnonov]

Hi, @tbezawada-git,

I tested a couple of examples from our website demos in order to reproduce the mentioned behavior, but I was not able to. It would be very helpful if you share more details about the component configuration you use or a working example with an error causing so I can explore it further.

Regards,
Ivaylo

[tbezawada-git]

Hi @iadnonov
Thank you for your response. Here are the additional details regarding our configuration and the specific issue we are facing:
Environment:
Vue Version: 2.7.16
Bootstrap Version: 4.1.1
Initial Kendo UI Package Versions:
@progress/kendo-datasource-vue-wrapper: ^2018.3.1018
@progress/kendo-dateinputs-vue-wrapper: ^2018.2.620
@progress/kendo-grid-vue-wrapper: ^2018.2.620
@progress/kendo-theme-bootstrap: ^2.11.9
@progress/kendo-ui: ^2018.1.226

Issue Details:
Accessibility Tags: We noticed that the grid/pagination components have accessibility tags added in the version.
Accessibility Error: The issue reported by accessibility testing tools (such as AllyCAT) is: "Ensures elements with an ARIA role that require parent roles are contained by them. Required ARIA parent roles not present: menu, menubar, group." and please find the Screenshot
Existing Issue: Even after updating to the latest versions, we are still encountering issues where menuitem and menuitemradio roles need a parent role.
Vue component code :

`<template>
  <div class="paginateItem">
    <b-pagination
      role="group"
      aria-busy="true"
      :aria-label="'pagination'"
      :total-rows="totalRows"
      v-model="currentPageIndex"
      :per-page="pageSize"
      size="sm"
      align="right"
      @change="changePage({ pageNumber: $event })"
      ref="bPagination"
    />
  </div>
</template>`

> `<script>
> export default {
>   data() {
>     return {
>       totalRows: 100, // Generic value
>       currentPageIndex: 1, // Generic value
>       pageSize: 10, // Generic value
>     };
>   },
>   methods: {
>     changePage({ pageNumber }) {
>       this.currentPageIndex = pageNumber;
>       // Placeholder for additional logic
>     },
>   },
> };
> </script>`

And Rendered HTML:

> <div class="paginateItem">
>   <ul role="group" aria-disabled="false" aria-label="pagination" class="pagination b-pagination pagination-sm justify-content-end" aria-busy="true">
>     <li role="none presentation" class="page-item">
>       <a role="menuitem" tabindex="-1" aria-label="Goto first page" href="#" target="_self" class="page-link">
>         <span aria-hidden="true">«</span>
>       </a>
>     </li>
>     <li role="none presentation" class="page-item">
>       <a role="menuitem" tabindex="-1" aria-label="Goto previous page" href="#" target="_self" class="page-link">
>         <span aria-hidden="true">‹</span>
>       </a>
>     </li>
>     <li role="none presentation" class="page-item">
>       <a role="menuitemradio" tabindex="-1" aria-label="Goto page 1" aria-checked="false" aria-posinset="1" aria-setsize="43" href="#" target="_self" class="page-link">1</a>
>     </li>
>     <li role="none presentation" class="page-item active">
>       <a role="menuitemradio" tabindex="0" aria-label="Goto page 2" aria-checked="true" aria-posinset="2" aria-setsize="43" href="#" target="_self" class="page-link btn-primary">2</a>
>     </li>
>     <li role="none presentation" class="page-item">
>       <a role="menuitemradio" tabindex="-1" aria-label="Goto page 3" aria-checked="false" aria-posinset="3" aria-setsize="43" href="#" target="_self" class="page-link">3</a>
>     </li>
>     <li role="none presentation" class="page-item d-none d-sm-flex">
>       <a role="menuitemradio" tabindex="-1" aria-label="Goto page 4" aria-checked="false" aria-posinset="4" aria-setsize="43" href="#" target="_self" class="page-link">4</a>
>     </li>
>     <li role="separator" class="page-item disabled d-none d-sm-flex">
>       <span class="page-link">…</span>
>     </li>
>     <li role="none presentation" class="page-item">
>       <a role="menuitem" tabindex="-1" aria-label="Goto next page" href="#" target="_self" class="page-link">
>         <span aria-hidden="true">›</span>
>       </a>
>     </li>
>     <li role="none presentation" class="page-item">
>       <a role="menuitem" tabindex="-1" aria-label="Goto last page" href="#" target="_self" class="page-link">
>         <span aria-hidden="true">»</span>
>       </a>
>     </li>
>   </ul>
> </div>

We would appreciate any guidance or workarounds to resolve these issues without making extensive changes to our codebase.

[iadnonov]

Hi, @tbezawada-git,

Thank you for providing the additional details.

I understand how urgent fixing this issue is for your app. I tried to reproduce the issue with our latest version 2024.2.514, but still was not able to. In the following example, I am using a Pager for one of my tests. Can you please inspect it and confirm if the issue persists in this example on your end?

https://stackblitz.com/edit/u8hryv?file=src%2Fmain.vue

As a side note, the Kendo Vue Wrappers are in a period of depreciation. The last version was released in May 2024 with one year of support till May, 2025. More details can be found in our documentation page.