[nested-interactive] fails also for not interactive nested elements

Product: axe-core

Expectation:

To be able to use

<div role="button">
  pass
  <button role="presentation"></button>
</div>

PS: Any way of making the button “not interactive” would be ok for us… PPS: We tried also added aria-hidden="true" and tabindex="-1" but all failed the test

Actual:

It fails with a violation of nested-interactive.

Motivation:

The div is in reality a custom element to replace an actual button. However, as we can’t extend a native button we need to wrap it. To still be able to support integration with a native form around we put a “hidden” button in there which gets programmatically pressed when needed.

I added a failing test https://github.com/dequelabs/axe-core/pull/2905

[WilcoFiers]

@exah I’d very much recommend Steve’s suggestion of styling the option, instead of using a “presentational” checkbox. This nested-interactive rule finds things that behave inconsistently. So in some screen readers you will get the element announced, and in others you won’t. Putting tabindex=“-1” isn’t enough to have it be ignored everywhere consistently. Users can still focus elements with tabindex=“-1” by tabbing it. Even screen reader users will do this when they touch the screen of their phone. You’d have to disable the input to prevent that, and then put role=none on it to avoid the screen readers that do handle nested interactive elements picking up the checkbox by mistake.

[straker]

Interesting. So now that I see what you’re doing I think the input shouldn’t be there in the fist place. My guess is that you’re trying to create a multi-selection listbox similar to the example here https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/examples/listbox/listbox.html#ex2_label. Since the input has no accessible name and is not suppose to be focusable itself, then you’re probably using it just for the look of a checkbox. So ya, you’re going to have to go through a ton of hoops to get that to work without causing problems for screen reader users (by adding hidden) and keyboard users (preventing tab).

It would be better to remove the checkbox input and just add a checked style to the selected option.

[role=option][aria-selected=false]::before,
[role=option]::before {
  /* styles to make it looked unchecked */
}

[role=option][aria-selected=true]::before {
  /* styles to make it looked checked */
}