aria-required-children violation for tablist role

[mturnwall]

Product

axe-core

Question

I'm trying to figure out why the following HTML structure is giving me a aria-required-children violation.

<ul role="tablist" class="chrome-tabs-group" aria-owns="tab_1">
    <li id="li_tab_1" role="presentation" class="chrome-one-tab-container" data-tooltip="record" style="width: 180px">
        <button draggable="true" role="tab" id="tab_1" class="chrome-one-tab -meta is-selected has-children move-cursor" tabindex="0" aria-grabbed="false" aria-selected="true" aria-label="record">
            <div class="chrome-one-tab-content has-presence">
                <span class="presence-dot is-hidden"></span>
            </div>
            <div class="chrome-one-tab-content">
                <span class="chrome-one-tab-label" data-truncation="true">record</span>
            </div>
        </button>
        <button type="button" class="chrome-one-tab-close" aria-label="Close Tab record" data-tooltip="Close Tab record">
            <now-icon component-id="close-tab-tab_1" icon="close-outline" now-id="close-tab-tab_1" dir="ltr"></now-icon>
        </button>
    </li>
</ul>

I tried moving the tab role to the li but then I get the nested-interactive violation which is to be expected. I also tried adding the aria-owns attribute to the ul. I'm not sure what the actual issue.

Here is a screenshot of the violation. sn-canvas-tabs is the parent element and is a custom web component.

[mturnwall]

I noticed a similar structure recommended here #2415

[straker]

Thanks for the issue. It looks like the reason it is failing is because the second button element is not role=tab, and all children of a tablist must be a tab role. Because of that the rule is failing with the message Element has children which are not allowed

[mturnwall]

Thank you!

[tesk9]

@straker could you please provide a reference for where it's specified that all children of a tablist must be tab role? From what I see in the spec, at least one element owned or contained by the tablist must be a tab. I don't see guidance that no other elements are allowed.

I am aware that there's work underway to clarify required roles in w3c/aria#1033, but as far as I understand, the current language doesn't disallow the tablist from containing children/descendants with other roles.

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

From ARIA 1.1 tab section

An 'owned element' is any DOM descendant of the element, any element specified as a child via aria-owns, or any DOM descendant of the owned child.

owned element definition

---

Concretely, sometimes our tabs render with an icon and a tooltip rather than plain text. Our tooltips are in the DOM next to the element that they're related to, which in this instance means inside the element with role tablist.