primevue
primevue copied to clipboard
TabView: Accessibility - tablist role should be accessibility parent of elements with tab role
Describe the bug
The tab role should be a direct child of the tablist role to maintain the correct relationship and ensure that assistive technologies can properly interpret and navigate the structure. When the tab elements are not direct descendants of the tablist, screen readers and other assistive tools might not correctly associate the tabs with the tablist, which can lead to an accessibility failure.
Authors MUST ensure elements with role tab are accessibility children of an element with the role tablist.
The specific wording is 'children' when the ARIA spec uses the word 'children' to mean direct descendants and 'descendants' when this direct relationship is not necessary. When viewing the accessibility tree the <ul>
element is between the tablist and the tab role
Reproducer
https://stackblitz.com/edit/2pvw6d?file=src%2FApp.vue
PrimeVue version
3.53.0
Vue version
4.x
Language
TypeScript
Build / Runtime
Vue CLI App
Browser(s)
No response
Steps to reproduce the behavior
Issue is evident running automated accessibility tool against the tab example stackblitz
Expected behavior
Component does not cause accessibility warnings, tablist role is on the direct parent of tabs