Generates a
tab list element
and its child tab elements with all required ARIA attributes.
All tab elements have an aria-controls attribute that references the
associated tab panel.
The tab panels controlled by the tab list are made known by objects of
type Panel. Because the tab panels are
referenced from the
tab elements, the tab panel elements need only
an id attribute and role=tabpanel tabindex=0.
Once created, the component provides the externally invocable methods
defined by module:AashTablist.Api through an object in
a property of the mounted DOM element (see module:AashUtil.getApi).
The DOM is generated as shown in the
WAI-ARIA Authoring Practices 1.1
Example:
<div>
<div id="sampleTabs" class="aash-tablist" role="tablist">
<span id="tab-1-tab" role="tab" aria-selected="true"
aria-controls="tab-1">
<button type="button" tabindex="0">Tab 1</button>
</span>
<span id="tab-2-tab" role="tab" aria-selected="false"
aria-controls="tab-2">
<button type="button" tabindex="-1">Tab 2</button>
</span>
</div>
</div>
<div id="tab-1" role="tabpanel" aria-labelledby="tab-1-tab">This
is panel One.</div>
<div id="tab-2" role="tabpanel" aria-labelledby="tab-2-tab" hidden="">
This is panel Two.</div>