how to fix a11y interactive controls must not be nested error

Question

I have the following markup:

<ul role="listbox">
    <li role="option">
        <span>Active</span>
        <button>Expand</button>
    </li>
    <li role="option">
        <span>A list item only</span>
    </li>
    <li role="option">
        <span>Additional List</span>
        <button>Expand</button>
    </li>
</ul>

The li element has an on click handler that triggers an action. The button within the list item also triggers an action that expands another set of panel.

But due to the role="option" I get an AXE error "Interactive controls must not be nested" error on the button element.

We need the ul and li roles to have proper screen reader output so that needs to stay. A little stuck on a proper fix, any ideas is greatly appreciated! Thank you.

Removing the roles off the ul and li fixed the issue but the screen reader no longer announced the span label.

Answer 1

According to the spec of the Listbox Pattern:

the interaction model conveyed by the listbox role to assistive technologies does not support interacting with elements inside of an option. Because of these traits of the listbox widget, it does not provide an accessible way to present a list of interactive elements, such as links, buttons, or checkboxes.

That is why you are getting that error. If you need to have interactive elements inside your options, consider using the Grid Pattern:

To present a list of interactive elements, see the Grid Pattern.

However, if your intention was to create a list of navigation links, you can just use the nav element.

Further info on what you are trying to build should be provided though.
I hope you found that helpful.