Eslint-plugin-jsx-a11y: 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.