Error Elements with the '${role}' interactive role must be focusable is incorrect for interactive elements

[khrome83]

I get the following error - "Elements with the 'tablist' interactive role must be focusable".

<div role="tablist" aria-label="Tabbed Content">
    <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1" >Item 1</button>
    <button role="tab" aria-selected="false" tabindex="-1" aria-controls="panel2" id="tab2" >Item 1</button>
    <button role="tab" aria-selected="false" tabindex="-1" aria-controls="panel3" id="tab3" >Item 1</button>
</div>

The error gets flagged, because the first button does not have a tabindex="0". The tabindex="0" is not needed here because a button is implicit and tab-able.

See https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html

[jessebeach]

@khrome83 excellent point. The "tabbiness" of the interactive element should definitely be taken into account. Great catch!

If you'd like to propose a PR, I'm more than happy to review.

[jessebeach]

The tablist role is creating the violation here. Technically, it is considered a composite, which is a widget and interactive: https://www.w3.org/TR/wai-aria-1.2/#tablist

Put tabindex="-1" on it and the violation will go away.

[fsuarez-globant]

I just added tabIndex=0 in the div with role tablist and it works for me.

<div role="tablist" aria-label="Tabbed Content" tabindex="0" >
    <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1" tabindex="0" >Item 1</button>
    <button role="tab" aria-selected="false" tabindex="-1" aria-controls="panel2" id="tab2" >Item 1</button>
    <button role="tab" aria-selected="false" tabindex="-1" aria-controls="panel3" id="tab3" >Item 1</button>
</div>

[vhoyer]

hey @jessebeach, doesn't this violation happens on all composite elements? If so, couldn't we add another condition to the filter on tabbable list to include all widgets that are not composite? Conversely, we could even add a rule for checking if composite widgets are tabbable themselves or have one descendant which is tabbable? Or even include this check into this rule? Does it make sense?