Activation

Manual by default

Manual activation

PanelControl allows users to move focus with arrow keys and commit with Enter / Space / click (activation: 'manual').

Key Features

  • This is our most important feature ever!

Auto activation

It is also possible to enable auto activation. This allows users to activate a tab as they arrow across, without needing to press Enter / Space / click (activation: 'auto'). Set data-activation="auto" (or init({ activation: 'auto' })) to enable this behaviour.

Key Features

  • This is our most important feature ever!
JS 
PanelControl.init({ activation: 'auto' });
// or per control, in markup:
// <div role="tablist" data-panelcontrol data-activation="auto">

Arrow protection (from auto back to manual)

auto falls back to manual whenever activating-on-arrow would hurt: when the PanelSet uses autoFocus (focus would jump into the panel, out of the strip) or loads content asynchronously (every keystroke would fire a load). The autoFocus check covers the JS option, data-auto-focus on the set, and data-auto-focus on any individual tab.

This strip asks for data-activation="auto" too, but its PanelSet has data-auto-focus="input". So PanelControl quietly keeps it manual: Tab into the strip and arrow across. The panel stays put. Press Enter to switch, and watch focus drop into the field. That focus-stealing on every arrow is exactly what auto avoids here.

Account