Primefaces TabView generates Axe DevTools compliance issue

25 Views Asked by At

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.

0

There are 0 best solutions below