$p.gui.tabs (tabbed interface module)

This module provides functionality for simple tabbed interface GUI elements.

The recommended markup for the tabs is either an <ul>, or an <ol> list, with <a> for the actual tabs. More important, however, is that the attributes are set up as follows:

<ul role="tablist">
  <li role="presentation">
    <a role="tab" href="#panel1" aria-controls="panel1" id="tab1" aria-selected="false">First</a>
  </li>
  <li role="presentation">
    <a role="tab" href="#panel2" aria-controls="panel2" id="tab2" aria-selected="true">Second</a>
  </li>
</ul>

The attributes here have the following meanings:

• The various role-attributes define the semantic roles of the elements:
  • The role tablist indicates that the element contains a list of tabs. This attribute needs to be set on the top-level of the tabs structure (in this case, in the <ul> element).
  • The role presentation removes the default semantics of an element. In this case, it indicates that the <li> should not be treated as list items.
  • The role tab indicates that the element is used as a tab which interactively shows a specific tab panel when activated.
• The attribute aria-controls provides a reference to the tab panel (using it’s ID). This is used by the script code to determine which panel to show when the tab is clicked.
• The attribute aria-selected defines if a tab is currently selected.
• The id of each tab is used top back-reference the tab from the panel.
• If <a> is used as a tab element (which is the recommended choice), its href attribute should also link to the target panel as fragment URL (i.e. the id, prefixed with #).

As with the tabs, the elements used for the panels can be arbitrarily chosen. In most cases, a block-level element, like <div>, <section> or <article> is probably the best choice.

<div role="tabpanel" id="panel1" aria-labelledby="tab1" hidden>
  …
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2">
  …
</div>

These need to be marked up with the following attributes:

• The attribute role=“tabpanel” marks up the panel as a tab panel.
• The aria-labelledby attribut links the panel with it’s tab. It should contain the id of the panel, as described above.
• Each panel must have a unique id that can used to refer to it from the tabs (see above).
• The hidden attribute is used to hide all panels that are not initially visible. This is an empty attribute.

Any structure as the above that is present at the time that the (pre-)initialisation takes place, will automatically be detected and the necessary callback functions will be added.

If a tab interface is dynamically added to the page, it can be activated by calling the following method:

$p.gui.tabs.add(e);

In this case, e must be a reference to the root element (the one with the role=“tablist” attribute)

Notes:

• This module does not provide any CSS to style the tab interface. When designing the user interface, it is recommended that you use the aria-* and role attributes as selectors.
• Do not use aria-hidden=“true” for hidden tab panels. This status is already implied by the hidden attribute.

• $p (page core)

• Node: ARIA: tablist role on MDN.
• ARIA: presentation role on MDN.
• ARIA: tab role on MDN.
• ARIA: tabpanel role on MDN.
• hidden on MDN.