Should text nodes be ignored by aria-required-children?

[WilcoFiers]

The following code is passing the aria-required-children rule. I'm not sure whether it should, we should do some testing here. I expect assistive tech aren't going to allow proper keyboard navigation without a row / gridcell role on that last div. We'll see.

The reason this was raised is if you put tabindex="0" on that last div, it now gets reported as a failure. That's an inconsistency that's difficult to explain.

<div role="grid">
  <div role="row">
    <div role="gridcell">name</div>
    <div role="gridcell">e-mail</div>
  </div>
  <div>You have no data</div>
</div>

[straker]

After testing, I think the above code should fail the aria-required-children rule. Here are the results of my testing:

• VO/Safari - Doesn't announce the grid, but using the up and down arrows for text navigation completely skips over the text "You have no data," so a user wouldn't know it was there.
• JAWS/Chrome - Announces the grid as having 2 columns and 1 row, but then arrowing down the columns reads the "You have no data" and you have to arrow down 1 more time to hear "grid end." This would suggest that JAWS understands it's part of the grid yet not at the same time. If you try to navigate the grid using cell navigation, there's no way to get to the text so you'd never know it was there unless you tried to exit the grid using the arrow keys.
• NVDA/Firefox - Announces the table as having 2 columns and 1 row, but then arrowing down the columns reads the "You have no data" and you have to arrow down 1 more time to hear "out of table." This would suggest that NVDA understands it's part of the grid yet not at the same time. If you try to navigate the grid using cell navigation, there's no way to get to the text so you'd never know it was there unless you tried to exit the table using the arrow keys.

[dbjorge]

I agree. And in addition to the self-inconsistency, the current behavior is also inconsistent between different rules. For example,

<!-- list violation -->
<ul>
  <div role="listitem">Allowed.</div>
  <div>Disallowed.</div>
</ul>

<!-- aria-required-children pass (should be violation) -->
<div role="list">
  <div role="listitem">Allowed.</div>
  <div>Should be disallowed.</div>
</div>

<!-- aria-required-children violation -->
<div role="list">
  <div role="listitem">Allowed.</div>
  <div tabindex="0">Disallowed.</div>
</div>