svelte-tabindex

A Svelte component for managing tabindex.

Installation

npm install svelte-tabindex

How does it works ?

... creates a reactive svelte context (using writable) so that its children can update their tabindex.

Every fousable element of your app (links, buttons, inputs ...) must get the context to implement this behaviour.

The context value is an object ({ tabindex : Number }) you can spread as node attribute to do so.

Usage

Link.svelte _(a simple link wrapper that gets the svelte-tabindex context)_

``html



`

App.svelte

`html


focusable link

non focusable link
another non focusable link

another focusable link
`

Advanced usage

_(e.g. src/routes/index.svelte)_

$3

The component has an active (Boolean) attribute witch can be used to dynamically toggle its behaviour.

$3

Your app may need to have nested untabble regions _(e.g. collapsible menu)_. In that case any active ancestor will override the active state of any NoTab descendants. You can bypass this feature by using the reset attribute

$3

The component has a reset attribute that allows you to ignore the state of any active ancestors. It can be used for modals, as the whole app would be wrapped in an active component, a modal component wrapped in its own ` would not inherit its active state from its ancestors.