Playground with all usage patterns

Demo codepen

Basic usage as directive

Basic usage as composable

Modifiers

.autofocus

Focuses the first child element that matches autofocusSelector or (if no such element is found) the first focusable child element.

Is only triggered on mount or on directive activation (changed value from false to true) and only if it not covered by another element.

To check if an element is covered it will be scrolled into view (el.scrollIntoView()) so if you have fixed (or sticky) headers or footers set scroll-padding on html in CSS so that the elements scroll in a visible area.

.roving

Simplify TAB key navigation in large applications where lots of elements are focusable.

TAB / SHIFT + TAB key navigates between trap groups, while navigation inside the .roving trap group is done using ARROW_KEYS.

The last focusable element of each .roving trap group is remembered and refocused when the trap group is focused.

.roving.grid

In order to specify the navigation pattern you must use 2 dataset attributes on the focusable elements inside the .roving trap group:

• data-v-kbd-trap-row specifies the numeric identifier of the row the element belongs to (numbers need not be consecutive, but their natural order determines the navigation order)
• data-v-kbd-trap-col specifies the numeric identifier of the column the element belongs to (numbers need not be consecutive, but their natural order determines the navigation order)

Any or both attributes can have a value of * that means that it is an alement that can be focused from elements having any coresponding (row or col) attribute.

Navigation rules

• the first focusable element on the row / col (based on direction of movement) is focused
• an element with * for row or col is considered to belong to any row / col

.roving on [role="grid"] trap group element

In order to specify the navigation pattern you must use role attributes [role="row"] and [role="gridcell"].

All focusable element must have [role="gridcell"] and must be inside [role="row"] elements inside [role="grid"] trap element.

The gridcells will be considered inline-start aligned in every row.

Navigation rules

• the first focusable element on the row / col (based on direction of movement) is focused

.escrefocus

When pressing Esc key disable the active trap and refocus the element that was in focus before activating the trap.

Press Shift + Esc to disable / enable the current tab group.

.escexits

When pressing Esc key disable the active trap and move focus in the parent trap (if it exists).

Press Shift + Esc to disable / enable the current tab group.

Has priority over .escrefocus.