Must role="tab" be the direct child of a role="tablist"?

Question

I have an accordion which is structured like:

<section... role="tablist">
  <div>
    <h3 role="tab">Title</h3>
    <div role="tabpanel">
    ...
    </div>
  </div>
</section>

Does tab have to be a direct child of the tablist to conform to wai aria best practices or is it okay to be wrapped in a div?

Answer 1

Authors MUST ensure elements with role tab are contained in, or owned by, an element with the role tablist.

^{https://www.w3.org/TR/wai-aria-1.1/#tab}

Your example is therefore correct.

I would suggest you read through the spec to ensure you are following best ARIA practice.

For example adding the role on a div as opposed to a section element, as per the best practice example.