I'm trying to setup a Primefaces TabView
<p:tabView >
<p:tab title="Title">
Content
</p:tab>
</p:tabView>
and the generated html produces the following Axe DevTools compliance error:
"Interactive controls must not be nested"
"Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies"
With a link to this page for more information: https://dequeuniversity.com/rules/axe/4.8/nested-interactive?application=AxeChrome
It highlights this part of the generated HTML:
<li class="ui-tabs-header ui-state-default ui-tabs-selected ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" data-index="0" tabindex="0">
<a href="#j_idt425:j_idt426" tabindex="-1">Title</a>
</li>
"To solve this problem, you need to fix the following:" "Using a negative tabindex on an element inside an interactive control does not prevent assistive technologies from focusing the element (even with aria-hidden="true")"
Related Node
<a href="#j_idt425:j_idt426" tabindex="-1">Title</a>
My reading is the problem is having a focusable element (<a.. ></a>
) inside another focusable element (<li>...<li>
).
Does anyone know how to resolve this issue?
I see the related issue here, but working through Primefaces I can't fine tune the generated HTML: jquery-ui tab "Interactive controls must not be nested"
Using Primefaces 10.