primevue icon indicating copy to clipboard operation
primevue copied to clipboard

TabView: Accessibility - tablist role should be accessibility parent of elements with tab role

Open DanRoddis opened this issue 6 months ago • 0 comments

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

image

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

DanRoddis avatar Aug 13 '24 12:08 DanRoddis