attachments

Rovingfocus

Manages keyboard focus within a group, allowing focus to move between items using arrow keys for accessible navigation.

Show code

Usage

<script>
    import { rovingfocus } from 'svxui';
</script>

<div
    {@attach rovingfocus({
        // Item selector
        target: '[data-roving-item]',
        // Loop roving focus
        loop: false,
        // Orientation
        orientation: 'vertical',
        // Initial item focus when wrapper is focused
        initialIndex: 'first',
        // Activate item when focused
        activateOnFocus: false
    })}
>
    <button data-roving-item>Item 1</button>
    <button data-roving-item>Item 2</button>
    <button data-roving-item>Item 3</button>
</div>

API Reference

RovingfocusOptions

Property	Type	Default	Description
`target`	`string`	'[data-roving-item]'	Item selector
`loop`	`boolean`	false	Loop roving focus
`orientation`	`union`	vertical	Orientation ("vertical" \| "horizontal")
`initialIndex`	`union`	'first'	Initial item focus when wrapper is focused
`activateOnFocus`	`boolean`	false	Activate item when focused