aria-practices icon indicating copy to clipboard operation
aria-practices copied to clipboard

Draft Multi-Select Tabs Design Pattern

Open mcking65 opened this issue 8 years ago • 0 comments

The tabs design pattern describes the simplest and most common types of tabbed interfaces. It does not describe more complex tabbed interfaces with features such as:

  1. Ability to select multiple tabs to be the target of an action, such as delete, move, copy, etc.
  2. Ability to display more than one tabpanel.
  3. Ability to hide (collapse) a visible tabpanel by activating its associated tab.

Rather than make the existing tabs pattern, which is sufficient for nearly all APG readers, extraordinarily complex and thus harder to understand by adding guidance that accommodates these advanced features, this issue calls for a separate multi-select tabs design pattern that explains how to implement the above functionality. The multi-select pattern needs to address the conclusions about the use of aria-expanded and aria-current arrived at in issue #459, namely:

  1. In multi-select tablists, a state or property other than selected communicates which tabpanel or tabpanels are displayed.
  2. If activating a tab in a multi-select tablist can alternately show and hide its associated tabpanel, aria-expanded is appropriate because the tab element functions as an expand/collapse toggle.
  3. If a multi-select tablist can display only one tabpanel, and if one tabpanel is always displayed, then aria-current is appropriate.

Development of example implementations of this pattern are managed in issue #342.

mcking65 avatar Mar 22 '17 22:03 mcking65