NickColley / jest-axe

Custom Jest matcher for aXe for testing accessibility ♿️🃏
MIT License
1.06k stars 54 forks source link

On updating to v7, our "closable Tab" fails due to not allowing interactive elements as siblings/descendants of a tab #260

Closed Barbacoa08 closed 1 year ago

Barbacoa08 commented 1 year ago

We have implemented closable tabs such that the structure looks roughly like: (not showing all of the aria-controls/selected/ect attributes for simplicity)

<div role=tablist>
  <div>
    <a role=tab>Regular Tab</a>
  </div>

  <div>
    <a role=tab>Closable Tab</a>
    <span role=button>X</span>
  </div>

  // tabpanel ish
</div>

This used to pass in v6, but now fails, and my team is unsure of how to properly implement a "closable tab" due to the new rules not allowing intractable elements other than role=tab. The close button definitely should not be a role=tab, but there doesn't seem to be any other option that the test allows.

Advice? Suggestion? Is this even the appropriate place for this question?

NickColley commented 1 year ago

No it's not appropriate as you're asking for advice on ARIA which is something I charge for. But I hope you figure it out, good luck!

Try seeing if moving the button inside your tab works.