"role=text": no focusable descendants

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

PR: https://github.com/dequelabs/axe-core/pull/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

[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.

[dan-tripp]

Right on. I’m working on it.