TabFocus

Component for managing keyboard-based focus navigation using Tab key.

TabFocus provides automatic Tab/Shift+Tab navigation between TabFocusable elements within a visual hierarchy. It handles focus traversal in both forward and backward directions, and supports Escape key handling for focus escape behavior.

The component automatically finds focusable elements and manages focus transitions based on their position in the visual hierarchy. It respects the focusRoot boundary when specified, limiting focus navigation to a specific visual subtree.

Key features:

• Tab key navigation (forward focus)
• Shift+Tab navigation (backward focus)
• Escape key handling for focus escape
• Configurable focus root for bounded navigation
• Automatic detection of TabFocusable elements
• Circular navigation (wraps to beginning/end)

Usage example:

var tabFocus = new TabFocus();
tabFocus.focusRoot = myFormContainer; // Optional: limit to this subtree
myWindow.component('tabFocus', tabFocus);

Instance Members #

The visual entity this component is attached to

Optional root visual that limits the scope of focus navigation.

When set, tab navigation will only consider TabFocusable elements within this visual's hierarchy. If null, the entire entity hierarchy is considered.

Private Members #

Whether the left Shift key is currently pressed

Whether the right Shift key is currently pressed

Reference to the currently focused visual during navigation search.

Used internally to track position in the hierarchy when finding the next/previous focusable element.

Called when the component is bound to its entity.

Sets up keyboard event listeners for Tab navigation and Escape handling.

Handles key down events for focus navigation.

Processes Tab (forward), Shift+Tab (backward), and Escape key events when the current focus is within the managed visual hierarchy.

Handles key up events to track Shift key state.

Updates the shift key pressed state which determines navigation direction.

Moves focus to the next focusable element in the hierarchy.

Searches forward from the currently focused element. If no focusable element is found after the current one, wraps around to search from the beginning.

Moves focus to the previous focusable element in the hierarchy.

Searches backward from the currently focused element. If no focusable element is found before the current one, wraps around to search from the end.

Recursively searches for the next TabFocusable element in the visual hierarchy.

Performs a depth-first search starting from the given visual. When findingWithFocused is set, skips elements until that visual is found, then returns the next focusable element.

Recursively searches for the previous TabFocusable element in the visual hierarchy.

Performs a reverse depth-first search starting from the given visual. When findingWithFocused is set, skips elements until that visual is found, then returns the previous focusable element.

Finds the currently focused TabFocusable element.

Checks if the currently focused visual implements TabFocusable, or searches up the parent hierarchy to find a TabFocusable ancestor.

Metadata #