Roving Focus

The roving focus is a helper component that manages keyboard focus within a container element. It enables users to navigate through focusable elements using arrow keys, providing an accessible way to interact with grouped elements. This component is particularly useful for implementing keyboard navigation in menus, toolbars and other interactive element groups.

Handles focus management for a given container

Architecture

sc-roving-focus

Reference

  • Roving Focus

    This is a non-visual component that manages focus behavior within a given container. It listens for keyboard events and controls focus movement among child elements, ensuring a consistent and accessible navigation experience.

    • Attributes

      • direction
        enum
        /
        default: ltr

        Defines the direction of focus movement. Use ltr for left-to-right or rtl for right-to-left layouts. This setting affects how the arrow keys navigate through elements.

      • disabled
        boolean
        /
        default: false

        If true, the roving focus functionality is disabled.

      • element-id
        string
        /
        default: -

        Specifies the ID of the container element that will receive the roving focus event listeners. This attribute is required for the component to function properly.

      • focus-selector
        string
        /
        default: -

        Defines the CSS selector used to identify focusable elements within the container. This selector determines which elements can receive focus through keyboard navigation.

      • loop
        boolean
        /
        default: true

        When set to true, the focus will loop from the last element to the first element (and vice versa) when using arrow keys for navigation.

      • orientation
        enum
        /
        default: horizontal

        The orientation of the focus movement. Defines how the arrow keys function: horizontal uses left/right arrows, while vertical uses up/down arrows.

      • single-tabfocus
        boolean
        /
        default: false

        When set to true, only one element inside the container will be focusable via the Tab key. All other elements can only be focused using the Arrow keys. This improves keyboard navigation efficiency.

    • Events

      • onFocusElement

        Triggered when an element within the container receives focus through the roving focus navigation. This event can be used to implement custom behaviors when focus changes.

Keyboard

  • When orientation is set to horizontal, moves focus to the previous element based on the specified direction and loop settings. In rtl mode, this moves focus to the next element.

  • When orientation is set to horizontal, moves focus to the next element based on the specified direction and loop settings. In rtl mode, this moves focus to the previous element.

  • When orientation is set to vertical, moves focus to the previous element based on the specified direction and loop settings.

  • When orientation is set to vertical, moves focus to the next element based on the specified direction and loop settings.

made for toddle