Class

AashTablistComponent

AashTablist~AashTablistComponent(props)

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>
Constructor

# new AashTablistComponent(props)

Parameters:
Name Type Description
props Object

the properties

id string

the id for the enclosing div

initialPanels Array.<Panel>

the list of initial panels

l10n function

a function invoked with a label (of type string) as argument before the label is rendered

View Source components/tablist/AashTablist.ts, line 8