The tablist element

Categories:

• Flow Content
• Sectioning Root
• If the element’s children include at least one tab-panel pair: Interactive Content
• If the element’s children include at least one tab-panel pair: Palpable Content

Contexts in which this element can be used:

Where Flow Content is expected.

Content Model:

Zero or more implicit pairs, each consisting of exactly one tab element followed by exactly one tabpanel element, optionally intermixed with script-supporting elements.

Tag omission in text/html:

Neither tag is omissible.

Content Attributes:

Global attributes

Allowed ARIA role attribute values:

tablist

Allowed ARIA state and property attributes:

Global aria-* attributes

Any aria-* attributes applicable to the allowed roles

DOM Interface:

interface CustomTablist : HTMLElement {};

A tablist element represents a tab list: a list of tab-panel pairs, wherein all tabs and at most one panel are exposed to the user. When the user selects a tab, its corresponding panel becomes exposed and all other panels become hidden.

Note: An empty tablist element is valid; in this case no tabs or panels are exposed.

User agents must add the tablist element’s focusable children to the tab sequence of a page, in a manner defined by the algorithm below:

1. Let the page’s tab sequence be identified by P.
2. Remove all focusable descendants of the tablist from P.
3. Create a new empty tab sequence T.
4. For each tab-panel pair in the tablist, perform the following subroutine:
   1. Add the tab element to T.
   2. If the tab’s corresponding tabpanel element is expanded, add all focusable elements within the panel to T in the standard order. Otherwise, do nothing.
5. Inject T into P, between the last focusable element preceding the tablist and the first focusable element following the tablist.

This algorithm must be re-run each time a new tab element is selected.

The tab element

Categories:

None

Contexts in which this element can be used:

As a child of a tablist element: directly before a tabpanel element.

Content Model:

Either Phrasing Content, or exactly one element of Heading Content.

Tag omission in text/html:

A tab element’s end tag can be omitted if the element is immediately followed by a tabpanel element.

Content Attributes:

Global attributes

Allowed ARIA role attribute values:

tab

button

Allowed ARIA state and property attributes:

Global aria-* attributes

Any aria-* attributes applicable to the allowed roles

DOM Interface:

interface CustomTab : HTMLElement {};

A tab element represents a tab in a tab list. The corresponding panel of a tab element is the adjacent tabpanel sibling that follows it. The tab labels its corresponding panel.

All tabs in a tab list must always be exposed to the user.

When a tab is selected, its corresponding panel must be expanded, and when a tab is not selected, its corresponding panel must be collapsed. The user agent should allow the user to select a tab. No more than one tab may be selected at a time.

The tabpanel element

Categories:

None

Contexts in which this element can be used:

As a child of a tablist element: directly after a tab element.

Content Model:

Flow Content

Tag omission in text/html:

A tabpanel element’s end tag can be omitted if the element is immediately followed by a tab element, or if there is no more content in the parent element.

Content Attributes:

Global attributes

open - Whether the panel is exposed

Allowed ARIA role attribute values:

tabpanel

Any role that supports aria-expanded

Allowed ARIA state and property attributes:

Global aria-* attributes

Any aria-* attributes applicable to the allowed roles

DOM Interface:

  interface CustomTabpanel : HTMLElement {
    attribute boolean open;
  };

A tabpanel element represents a panel in a tab list. The corresponding tab of a panel element is the adjacent tab sibling that precedes it. The panel is labeled by its corresponding tab.

No more than one panel in a tablist should be exposed to the user.

The open content attribute is a boolean attribute whose presence indicates whether or not the content of the panel is to be exposed to the user. A panel is called expanded when its open attribute is present, and collapsed otherwise.

When the element is created, if the open attribute is absent, the information should be hidden; if the attribute is present, that information should be shown. Subsequently, if the attribute is removed, then the information should be hidden; if the attribute is added, the information should be shown.

The user agent should allow the user to request that the panel’s contents be shown or hidden. To honor a request for the contents to be shown, the user agent must set the open attribute on the element to the empty string. To honor a request for the information to be hidden, the user agent must remove the open attribute from the element.

A tablist element must have no more than one child tabpanel element with its open attribute set. If no child tabpanel elements have the open attribute present, the user agent should set that attribute on the first tabpanel element child, with the empty string as its value. Any time the user agent sets the open attribute on a tabpanel child of tablist, it must remove the open attribute from all other sibling tabpanel elements.

The open IDL attribute must reflect the open content attribute.