Allowed children of role=tablist includes any role including tabpanel?

[stevefaulkner]

The frequently observed pattern for tablist, tab and tabpanel is for a tablist to only contain children with role=tab:

<div role=tablist><span role=tab>poot 1</span> <span role=tab>poot 2</span></div>

but there appears to be nothing (I can find) to prohibit a tablist being a container for both tabs and tabpanels

<div role=tablist>
<span role=tab>poot 1</span>
<div role=tabpanel>...</div> 
<span role=tab>poot 2</span>
<div role=tabpanel>...</div> 
</div>

Is it the case that tablist with both tabs and tabpanels as children is OK?
Am asking as I found an example of a widget using this latter pattern.

[scottaohara]

I think this will be clarified with the work being done in #1454

for instance, "Required Owned Elements" is being changed to "Allowed Child Roles"

The first paragraph if this revised term is:

Any element that is a direct child of the element with this role. For example, an element with the role list may own elements with the role listitem, but not elements with the role option.

and that should answer this question: i.e., a tabpanel is not allowed within a tablist

[thierryk]

Am asking as I found an example of a widget using this latter pattern.

I am very interested in seeing the styling of that widget (how the layout is done with such construct) can you share an URL?

[stevefaulkner]

@thierryk unfortunately I don't have direct access to it, just a reduced test case provided via a government client. :-(

[thierryk]

Thanks @stevefaulkner

I don't know if that may help your client but you could let them know that they can keep the same kind of markup, just by moving the closing </div> like so:

<div role=tablist></div>
<span role=tab>poot 1</span>
<div role=tabpanel>...</div> 
<span role=tab>poot 2</span>
<div role=tabpanel>...</div> 

and then rely on aria-owns like I do for TabPanelWidget and as I suggest for MDN Doc

[sinabahram]

This seems like it would be a usability nightmare unless very carefully thought through. Nested tabs is one thing, but that's a separate list of tabs as the contents of a given tab, to have an actual nesting within the top level list of tabs seems nonsensical to me for a variety of reasons, both UI/UX, as well as just semantically.

[stevefaulkner]

This seems like it would be a usability nightmare unless very carefully thought through. Nested tabs is one thing, but that's a separate list of tabs as the contents of a given tab, to have an actual nesting within the top level list of tabs seems nonsensical to me for a variety of reasons, both UI/UX, as well as just semantically.

right, which is why i was surprised that it was allowed. But from what Scott said in #1486 (comment) The spec is going to be tightened up.