add accessible? option to byRole query

[eps1lon]

Describe the feature you'd like:

Add a built-in method to query only accessible elements

Suggested implementation:

getByRole('listitem', { accessible: true /* default would be breaking */ })

accessible checks for:

1. :not([aria-hidden="true"]) and no ancestor matches [aria-hidden="true"]
2. not hidden visibility Confused it with focusability

Better: It implements https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion

Describe alternatives you've considered:

Implement custom query

Teachability, Documentation, Adoption, Migration Strategy:

Since byRole is mainly concerned about a11y it should also consider if the node in question is even accessible.

I would make this option configurable for low level tests. These elements are still displayed in the a11y pane in the chrome dev tools and are part of the a11y tree as far as I know. AT (only tested nvda+chrome, expect every AT to match that behavior) does not consider those e.g.

Strawman

<nav aria-label="breadcrumbs">
  <ol>
    <li><a /></li>
    <li aria-hidden="true">/</li>
    <li><a /></li>
  </ol>
</nav>

will be announced as a list with 2 items while the a11y tree will include 3 elements with the listitem role.

[kentcdodds]

I feel like accessible: true should be the default for all queries. I'm guessing it would be a pretty low-impact breaking change. 🤔

[alexkrolick]

Sounds more like a fix than a breaking change, since the idea was to navigate like a screen reader.

[kentcdodds]

Agreed

[eps1lon]

I have no strong feeling about the default value. It's more important to me that this stays configurable for now as long as the ARIA spec does not say that elements loose their roles when they become "inaccessible".

[eps1lon]

Since it seems like there are no strong objections I would start with the implementation.

[alexkrolick]

How does { hidden: true } sound for revealing those elements?

[kentcdodds]

That's fine with me. I'm not too concerned about this API because I think people wont use it a lot.

[eps1lon]

How does { hidden: true } sound for revealing those elements?

That matches the terminology in the latest aria spec so I'm all 👍

[kentcdodds]

🎉 This issue has been resolved in version 6.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀