With Arrow Controls
Small utility library to enable arrow controls for focussable elements inside a container.
Usage
Simple: Looks for elements with [data-with-arrowcontrols] and enables arrow controls for all focussable elements within.
withArrowControls()
You can customise the selector with the first argument, e.g.:
withArrowControls(".your-controlled-containers")
Config
You can also pass a config to customise the behaviour even further. These are the options:
export type TConfig = {
/**
* If set to true, the arrows will wrap from last to first and vice versa.
* @default: true
*/
wrapControls: boolean;
/**
* If set to true, elements that can't be tabbed will be ignored.
* @default: true
*/
ignoreUntabbable: boolean;
/**
* If set to true, prevent default events. Usually used to give more flexibility, so radio groups dont prevent function.
* If you only have a group of radio inputs, set it to false to check them.
* @default: true
*/
preventDefault: boolean;
/**
* Customise the child selector. This is for more advanced usecases, probably.
* Will be used inside rootElement.querySelectorAll(yourSelector)
* @default: undefined
*/
customSelector?: string;
};
Cleanup
If you need / want to cleanup the listeners, withArrowControls
returns an Array of { unsubscribe: () = void }
objects, that you can use to unsubscribe.
const subscriptions = withArrowControls();
subscriptions.forEach(s => s.unsubscribe());
Caveats
- If the elements inside your container change, by either adding an element or enabling an element for example, the function needs to be called again.
Outlook
Might look into adding a mutation observer to handle DOM updates. Also maybe add tests.
Inspirations
https://github.com/argyleink/roving-ux
Adam's library. Does the same, probably better. ¯_(ツ)_/¯