spatial-navigation-ts

A copy of the original library, without any modification (JavaScript SpatialNavigation), and typescript types.

This library works great in JS, Angular or pure typescript projects.

$3

``bash
npm i spatial-navigation-ts
`

$3

styles.scss
`scss
/ Add style to the focused elements /
:focus {
outline: 2px solid red;
}
`

app.component.html
`html
Link 1
Link 2

Div 1

Div 2

`

app.component.ts
`typescript
import { Component, OnInit } from '@angular/core';
import SpatialNavigation from "spatial-navigation-ts";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

ngOnInit(): void {
this.initNavigation();
}

initNavigation() {
SpatialNavigation.init();

// Define navigable elements (anchors and elements with "focusable" class).
SpatialNavigation.add({
selector: 'a, .focusable'
});

// Make the currently existing navigable elements focusable.
SpatialNavigation.makeFocusable();

// Focus the first navigable element.
SpatialNavigation.focus();
}

}
`

$3

`html






Link 1
Link 2

Div 1

Div 2

``

$3

+ Demonstrations