2 #Objects Objects

Layout and structural design patterns that can be reused many times for many different purposes. Agnostic to function and content.

layout display (grid/flexbox/multicol)
positioning/floats/alignment
sizing (width & height)
spacing (padding & margin)

Example: a three-column grid. It has a specific visual structure but it can be used in many contexts, e.g., a grid of products, a group of action buttons, or a listing of passes.

Source: kss-styleguide.scss, line 16

2.1 #Objects.Tablist The Tablist Object

The Tablist Object contains a series of corresponding tabs and panels. It is similar to a carousel, but only one panel is shown at a time and there is no timed automatic progression.

Note: Enable Javascript to view effects. Ensure the [defer] attribute is set on the <script> (or else move the <script> to the bottom of the <body>).

Your markup should include a series of <details> elements, each with a single <summary> first child. Add the [open] attribute to one <details> element, representing the panel to be initially opened on load. The front-end script will transform your source code into the respective panels and tabs as necessary. Without JavaScript enabled, this object will fall back to a set of fully-functional <details> expandables.

The tablist itself may have a horizontal or vertical orientation, specified by the [aria-orientation] attribute. This attribute semantically indicates the tablist layout to assistive technology, as well as defines keyboard interaction. This attribute can be changed dynamically after load. If the author chooses to use a vertical layout, they are responsible for visually styling the tablist in a vertical orientation (specifically, providing a height), as there are no default styles for said layout.

In either the horizontal or vertical orientation, a boolean [data-reversed] attribute may be specified. If true (i.e., the attribute is present), it indicates that the tabs come after the panels in source order and display order. This is useful if you want your tabs below or to the right of the panels. This attribute is static, meaning that once the script runs, the DOM of the tablist cannot be changed.

A few rules for markup:

On the tablist container, the [aria-orientation] attribute should be specified, and it should have a value of either "horizontal" or "vertical" (case sensitive). If the attribute is not specified, or it has another value, the arrow keys will not work during user interaction.
As required by the HTML Specification, each details element must contain exactly one summary element, followed by optional flow content. Each summary element must contain either phrasing content, or one heading element (h1–h6).
Each details element in the tablist should have the (unique) [id] attribute set. This enables the [aria-controls] and [aria-labelledby] accessibility features.
The [open] attribute should be set on exactly one details element in the tablist. If there are no details[open] elements, the first panel will be expanded by default; if there are more than one, the first [open] panel is expanded and all the rest are collapsed.

author: Chris Harvey
updated: 2018-05-04

Example

Tab 1

Panel 1

This is panel 1. Switch to the next panel by clicking its tab.

Tab 2

Panel 2

This is panel 2. Panels can contain flow content.

That is, you can put block elements here.

Tab 3

Panel 3

This is panel 3, the largest panel.

Read the proposal text here.

Markup

<!--link rel="stylesheet" href="/node_modules/aria-patterns/x-tablist/css/dist/o-Tablist.css"/-->
<!--script src="/node_modules/aria-patterns/x-tablist/js/dist/o-Tablist.js" defer=""></script-->
<div class="o-Tablist" role="tablist" aria-orientation="horizontal">
  <details class="o-Tablist__Panel" role="tabpanel" id="panel1">
    <summary class="o-Tablist__Tab" role="tab">Tab 1</summary>
    <h1>Panel 1</h1>
    <p>This is panel 1. Switch to the next <a href="#0">panel</a> by clicking its tab.</p>
  </details>
  <details class="o-Tablist__Panel" role="tabpanel" id="panel2" open="">
    <summary class="o-Tablist__Tab" role="tab">Tab 2</summary>
    <h1>Panel 2</h1>
    <p>This is panel 2. Panels can contain <a href="#0">flow content</a>.</p>
    <p>That is, you can put <a href="#0">block elements</a> here.</p>
  </details>
  <details class="o-Tablist__Panel" role="tabpanel" id="panel3">
    <summary class="o-Tablist__Tab" role="tab">Tab 3</summary>
    <h1>Panel 3</h1>
    <p>This is panel 3, the <a href="#0">largest</a> panel.</p>
    <form>
      <h2>A form:</h2>
      <p>This form has a <button type="button">button</button> and a <input type="text" placeholder="text input"/>.</p>
    </form>
    <p><a href="http://dev-chharvey.github.io/blog/html/tablist.html" rel="external" target="_blank">Read the proposal text here.</a></p>
  </details>
</div>

Source: o-Tablist.less, line 7