Interactive controls must not be nested

[IzzySmillie]

Story: https://github.com/RaspberryPiFoundation/digital-editor/issues/58
More details on issue: https://dequeuniversity.com/rules/axe/4.6/nested-interactive?application=AxeChrome

The problem is that the <li /> tab has a role="tab" and then nested inside it is an interactive button (the X close). You can't have an interactive element inside another interactive element.

Possible solution 1

A possible solution would be to somehow change the li to act as a wrapper element on two children buttons. Basically changing all the tab related elements on
<li class="react-tabs__tab react-tabs__tab--selected" role="tab" id="react-tabs-4" aria-selected="true" aria-disabled="false" aria-controls="react-tabs-5" tabindex="0" data-rttab="true"> to be on the child button element.

Something like this:

<li class="react-tabs__tab react-tabs__tab--selected">
  <button role="tab" aria-selected="true" aria-disabled="false" aria-controls="react-tabs-5" tabindex="0" data-rttab="true">
    text of the button
  </button>
  <button onClickHandler={(e) => closeFileTab(e, fileName)}>
    <svg>X</svg>
  </button>
</li>

It means the two actions sit next to each other, not nested inside one another. The problem is that we're using react-tabs and there doesn't seem to be a way to easily do this.

---