"role=text": no focusable descendants

[tujoworker]

I really love that "role=text" made it in to axe-core. So I would like to thank everyone involved at first 🙏

PR: #2702

Product: axe-core

Expectation: Allow to have "tabindex=-1" as a descendants of "role=text"

Actual: Ensures "role=text" is used on elements with no focusable descendants

Motivation: I use "tabindex=-1" to let JavaScript set the focus to a descendant to make a copy to the clipboard. I use "role=text" to let VoiceOver (and others) read the content without destruction.

Simple example (fails):

<p>
  some text
  <span role="text">
    more text
    <span tabindex="-1">JavaScript is able to focus this</span>
  </span>
</p>

Second example (fails):

<p>
  some text
  <span role="text">
    more text
    <span tabindex="-1" aria-hidden="true" class="visually-hidden">JavaScript is able to focus this</span>
  </span>
</p>

axe-core version: 4.2

[WilcoFiers]

Interesting use case. Can't say I've ever seen it used that way. We'll have a look. I'm not sure about the case where it is visible. A screen reader user using touch screen can still focus elements with tabindex="-1", that's kind of an edge case though. And it wouldn't be relevant if the element is off screen.

[WilcoFiers]

I think we need to change this rule to not consider elements with negative tabindex to be focusable. It is technically true, but difficult to explain, and a very unusual edge case to handle.

[tujoworker]

This would be wonderful 🙏🏻✨

[dan-tripp]

I would like to fix this issue. It seems to me that there are two ways to fix it:

1. change only the "aria-text" rule to not consider elements with negative tabindex to be focusable, or
2. change all axe-core code to not consider elements with negative tabindex to be focusable.

(2) would have more side effects, such as in lib/commons/aria/get-role.js: the hasConflictResolution(vNode) function. Any guidance, @WilcoFiers ?

[WilcoFiers]

@dan-tripp I think the simplest solve would be to test the tabindex in the focusable-element-evaluate check, similar to what we do in focusable-element-evaluate.js

const isFocusable = virtualNode.isFocusable;
let tabIndex = parseInt(virtualNode.attr('tabindex'), 10);
tabIndex = !isNaN(tabIndex) ? tabIndex : -1

if (isFocusable && tabindex >= 0) {

[dan-tripp]

Right on. I'm working on it.

[dan-tripp]

I must confess that I strayed from your advice @WilcoFiers - my PR uses "isFocusable(vNode)" rather than "vNode.isFocusable" because the latter seemed to break "nested-interactive virtual-rule". I don't know why. Anyway, I hope my PR helps.