Widget: Tabpanel

Details

Implementing This Widget

Implement the Tabpanel widget when you want to provide multiple tabpanels of information (for example, either Landscape, Portrait, or Square) that are focusable via the Tab key and navigable via the arrow keys.

To implement the Tabpanel widget:

1. Pass the data and config arguments into deque.createTabpanel() to receive a div back.
2. Add the div received to the DOM.
3. Refer to the following notes about each of the two arguments:
   • Data: Must be an array of objects, each object containing two fields: header and content. The header must specify either a label (which is a string label) or markup, which is HTML that will render into the tab (if you provide both, the markup will be used and the label will be ignored). Additionally, you may provide an array of classes to append to the tab. The content must specify a field called element, which must contain an HTML element. Not markup, but an actual reference to an actual element, either from the DOM or generated.
   • Config: Specifies the following fields:
     • autoselect is a boolean (defaults to false) which if true causes merely focusing on a tab to activate it and display its content below. If false, you must hit 'space' or click the tab to activate it.
     • vertical is a boolean (defaults to false) which switches to vertical control mode - keyboard interactions use up/down instead of left/right when true.
     • autoplay is a boolean (defaults to false). If true, the tabpanel will add an additional tab with a control which can be in two states: initially, it's in the 'play' state, and the control contains three buttons: "next", "pause" and "previous". If you click pause, it enters the "pause" state and the buttons are "next", "play" and "previous". They work as you'd expect.

Expected Operation and Accessibility Features

When using a keyboard, the Tab list should present only one tab stop for the active tab, and moving between tabs can be accomplished with left/right, up/down, or Ctrl+PageUp/Ctrl+PageDown.

Validation and Developer Notes

In order to validate this control, you must manually test focusing both on a tab button, and on an element in a tab panel with the recommended keyboard shortcuts in all browsers. Additionally, when autoplay is true, the ability to pause, previous, next and play must be possible using a keyboard.

Example Implementation Reference

To view an implementation of this widget, see TabPanel widget example.