Enhanced Keyboard Navigation in JavaScript – FocusManager

Preview:

Description:

The FocusManager library is a lightweight JavaScript library that enables you to manage keyboard and TV remote navigation, and focus styles for interactive elements. It is ideal for applications that need to support accessibility features or those designed for TV remotes.

Keyboard Navigation

FocusManager transforms user interaction by allowing smooth navigation through focusable elements using arrow keys. Developers can implement sophisticated directional movement without writing complex traversal logic.

Advanced Focus Style Management

The library provides full control over focus styles. You can configure visual indicators such as:

• Border colors and thickness
• Background modifications
• Animated focus transitions
• Customizable focus animations

Intelligent Element Detection

FocusManager automatically identifies and manages focusable elements across your application. It handles complex layouts by intelligently calculating the nearest navigable element based on directional input.

Event Handling

FocusManager uses a debounced keydown handler to manage navigation. It processes custom overrides if defined, or defaults to standard behavior for arrow keys and Enter.

How to use it

1. Download and add the FocusManager library to your web project:

<script src="v-focus-manager.js" defer></script>

2. Create a new instance of the FocusManager class.

const focusManager = new FocusManager();

You can customize the key mappings if you want to. For example, if you want to use ‘w’, ‘a’, ‘s’, and ‘d’ keys to move up, left, down, and right, you can do this:

const focusManager = new FocusManager({
  'w': 'ArrowUp',
  's': 'ArrowDown',
  'a': 'ArrowLeft',
  'd': 'ArrowRight',
});

3. Initialize the FocusManager and set the focus on a specific element

focusManager.initialize(document.getElementById('start-here'));

4. Apply the FocusManager to specific elements. Default: ‘v-focusable’.

const targetElement = document.querySelector('.v-focusable');
focusManager.focusOnElement(targetElement);

5. Navigate between elements programmatically:

focusManager.moveFocus('up');
focusManager.moveFocus('right');

6. Override keydown behavior for specific keys:

focusManager.setCustomKeyDownHandler((event) => {
  if (event.key === 'Enter') {
    // do something
  }
});

7. Change the focus styles & animations:

focusManager.changeFocusStyle({
  border: true,
  borderColor: '#0000ff',
  borderThickness: '2px',
  backgroundColor: null,
  borderRadius: '0px',
  animate: false,
  animationStyle: null,
  transitionDuration: '0.3s',
  transitionTimingFunction: 'ease',
  scrollIntoView: true,
});

8. Set a one-time override for the next keydown action:

focusManager.overrideNextKeyDown(() => {
  // do something
}, 'Enter');