negative tabindex might give false positive for nested-interactive

[RyanBerliner]

Example for reference: https://jsfiddle.net/7t4npwyL/

Product: axe-core

Expectation: Elements with tabindex="-1" placed inside another interactive element should not always fail nested-interactive

Actual: Elements with tabindex="-1" placed inside another interactive element always fail nested-interactive

Motivation: To start, I'm not entirely confident that my expectation here is correct, and this is certainly very similar to #2954. However, you see in the example provided that even adding tabindex="-1" to a <span> will fail this rule, when certainly a span is not interactive, and a negative tab index doesn't add any interactivity for the user.

axe-core version: >=4.2.0

[straker]

Thanks for the issue. It's not so much that the tabindex=-1 element is interactive, it's that screen readers don't always know how to properly handle a negative tab index when it's nested inside an interactive element.

For example, in VoiceOver and Safari, if you have the following code:

<button>
<span tabindex="-1">
  This fails... but probably shouldn't
</span>
</button>

<button><span>No interactive child</span></button>

If you read letter by letter, when you get to the 2nd button, it will automatically focus that button. However, if you go backwards reading by letter and get to the first button, it will not focus it for you. Same problem if you try to jump to the start of the line. Since you're reading the nested "interactive" child, it doesn't correctly register that your on the button.

This means that the screen reader thinks you're on the first button, but really your focus hasn't moved from the 2nd button so you'd click the wrong thing if you tried to activate it.

Screen.Recording.2021-10-22.at.8.23.43.AM.mov

Because of these issue, we flag the tabindex=-1. However, we do have a pr open to add a better message to let you know that tabindex=-1 does not work very well.

Going to close, but feel free to follow that pr or the other issue.

[RyanBerliner]

Awesome, thanks for such a thorough explanation. Makes sense, appreciate it.