Tab Widget tests

Examples of different configurations to generate Tab Widgets.

Tab Widget Example 1

Apples

No explicit default was set, so per standard functionality this first tabpanel will be shown by default.

Here's a link just to test keyboard tabbing. (it's odd talking about tabs, and tabs.)

Bananas

This is an example of a heading being used to populate the tab's label, while also not removing heading from the tabpanel. This is done by adding the value "keep" to data-atabs-heading.

Oranges are delicious and super great

The tab is getting its label from the data-atabs-tab-label. The heading is kept in the tabpanel because it does not have the data-atabs-heading attribute.

This is also an example of why using data-atabs-tab-label to define a tab's label can be preferred to using a heading or Table of Contents link. Shorter tab labels work better for these types of UI, rather than long headings / link labels.

Tab Widget Example 2

My default heading

The tab for this tabpanel is created from a data-atabs-tab-label attribute which is on the data-atabs-panel.

The tab associated with this panel has it's own unique class, beyond the default one set by the script. This is done via the tabpanel having the data-atabs-tab-class with a single string value of the class to add. For example "test-class".

Carrots

The data-atabs-panel has the value "default", which results in this tabpanel being opened by default.

While not necessarily condoned, this tabpanel contains a separate Tab Widget instance.

Lettuce

Leafy and crunchy, unless it's old and mushy...

Ice cream, the default tabpanel

Not only is this Tab Widget nested within another, it also has data-atabs-orientation="vertical" set to the widget wrapper. This attribute with the "vertical" value will convert a tablist to a stacked UI. aria-orientation="vertical" will be set to the tablist. Up, down, left and right arrow keys will all still be used to navigate the individual tabs.

Mushrooms

Either gross or food. I don't get it.

This tablist will be repositioned to the top of the Tab Widget container. And this message will be deleted when the script runs. So if you're seeing this, hi!

Not default

This tabpanel also has data-atabs-panel="default", but as it is not the first tabpanel with "default" as its value, this one is ignored.

This was an external section

This section existed outside of the primary grouping of tab panels.

You might need something like this if you don't have full control over your markup but need to create a Tab Widget with what you have to work with.

For full context, view source to see the script that sets up the Tab Widgets. The following code snippet are the lines specific to adding a tab and tabpanel to a specific Tab Widget. 


var injectContent = document.getElementById('inject-content');
var cloneContent = injectContent.cloneNode(true);
var allTabs = []; // collection of all Tab Widgets

// remove the original instance of the external content from the document.
injectContent.parentNode.removeChild(injectContent);

// Inject the external content into a particular Tab Widget.
allTabs[1].addTab(cloneContent, 'This tab label is long for testing purposes', 'custom-class');