createNavManager<
T>():NavManager<T>
Returns a new instance of the navigation manager.
The navigation manager simplifies keyboard navigation for a set of DOM elements. It provides a directive to use on some DOM elements, both to add the keydown event handler and to specify which elements should be managed (either by directly putting the directive on those elements, or by putting the directive on a parent element and specifying which child elements should be included through a selector function).
It provides some utilities to move the focus between those elements (focusFirst/focusLast, focusLeft/focusRight, focusPrevious/focusNext).
• T
The type of the context object used in the navigation manager.
NavManager<T>
An object containing methods and properties for managing focus navigation.
FocusEnd: (
arg?) =>HTMLElement|null
A type representing a function that focuses on the end element.
• arg?
• arg.event?: Event
HTMLElement | null
The HTMLElement that was focused, or null if no element was focused.
FocusNeighbour: (
arg?) =>HTMLElement|null
A type representing a function that determines the neighboring element to focus on.
• arg?
• arg.event?: Event
• arg.referenceElement?: HTMLElement | null
HTMLElement | null
The next HTMLElement to focus on, or null if no suitable element is found.
getKeyName(
event):string
Returns the key name given the keyboard event. The key name is built using event.key (such as ArrowLeft, PageDown...), prefixed with the modifiers. If present, modifiers are always in the same order: Meta+Ctrl+Alt+Shift+...
• event: KeyboardEvent
keyboard event
string
the name of the key, including modifiers
isInternalInputNavigation(
event):boolean
Returns true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside the input and false otherwise (i.e. the key is not ArrowLeft, ArrowRight, Home or End key, or that would not make the cursor move because it is already at one end of the input)
• event: KeyboardEvent
keyboard event
boolean
true if the keyboard event is an ArrowLeft, ArrowRight, Home or End key press that should make the cursor move inside the input and false otherwise.
NavManager<
T>:object
Represents a navigation manager that handles focusable elements in the DOM.
• T
The type of the configuration for the navigation manager items.
directive:
Directive<NavManagerItemConfig<T>,SSRHTMLElement>
Directive to attach the nav manager
elementsInDomOrder$:
ReadableSignal<HTMLElement[]>
Store containing the navigable elements in DOM order
focusFirst:
FocusEnd
Focus the first element, respecting the anscestor direction.
focusFirstLeft:
FocusEnd
Focus the element at the left-end of the list.
focusFirstRight:
FocusEnd
Focus the element at the right-end of the list.
focusIndex: (
index,moveDirection) =>HTMLElement|null
Focus the element at the given idex. If the element at the given index is not focusable, use the moveDirection to step into the next focusable element.
• index: number
the index of the element to focus
• moveDirection: -1 | 0 | 1
a move direction
HTMLElement | null
the new focusable element if found, null otherwise
focusLast:
FocusEnd
Focus the last element, respecting the anscestor direction.
focusLeft:
FocusNeighbour
Focus the next focusable element to the left of the currently focused element.
focusNext:
FocusNeighbour
Focus the next element, respecting the anscestor direction.
focusPrevious:
FocusNeighbour
Focus the previous element, respecting the anscestor direction.
focusRight:
FocusNeighbour
Focus the next focusable element to the right of the currently focused element.
refreshElements: (
now?) =>void
Refresh the elements list.
• now?: boolean
force the instant refresh of the elements
void
Configuration object for a navigation manager item.
• T = any
The type of the context object.
optionalcontext:T
optionalkeys:Record<string,NavManagerKeyHandler<T>>
Map of key handlers. The key in the map should match the result of calling getKeyName on the key event (for example "ArrowLeft" or "Ctrl+PageDown"). The value in the map is the corresponding key handler.
optionalselector: (directiveElement) =>Iterable<HTMLElement>
Function returning DOM elements to include in the navigation manager. It receives as a parameter the DOM element on which the navigation manager directive is used. If not specified, the default selector function only returns the element on which the navigation manager directive is used.
• directiveElement: HTMLElement
NavManagerKeyHandler<
T>: (info) =>void
Type of a key handler of the navigation manager. A key handler receives an object as its parameter, with the following properties:
• T = any
The type of the context object, defaults to any.
• info
• info.context?: T
• info.directiveElement: HTMLElement
• info.event: Event
• info.navManager: NavManager<T>
void