Make sure role="text" is used on elements with no focusable descendants

The role="text" attribute is used to combine text across multiple DOM elements into a single announcement for assistive technologies like screen readers. This is useful when markup splits what should be read as one phrase.

What is being tested?

The rule checks that elements with role="text" do not contain any focusable descendants (such as links, buttons, or form fields). Focusable elements inside a text role can create empty or confusing tab stops for keyboard users and screen readers.

Correct markup example

<h1><span role="text">Hello <br/>World</span></h1>

Incorrect markup example

<span role="text">
  <a href="/site.html">Not announced as link</a>
</span>

Explanation

When a text node is split by markup (for example, <h1>Hello <span>World</span></h1>), VoiceOver and other screen readers may treat it as two separate phrases. Wrapping them with role="text" makes them read as a single unit.

However, be careful: using role="text" overrides the roles of all descendant elements, including focusable elements. If a descendant is focusable (like a link), it will still be tabbable, but screen readers won’t announce its name, role, or value, resulting in an empty tab stop.