0

I want to navigate focus between elements in my web application using up or down keys (instead of just Tab and Shift + Tab). I'm able to do this by using the following helpers:

export function focusPrevious(focused, lockParent = false) {
    let previousSibling = focused.previousElementSibling;
    if (previousSibling == null) {
        if (!lockParent) {
            focusPrevious(focused.parentElement, lockParent);
            return;
        }
        previousSibling = focused.parentElement.lastElementChild;
    }
    previousSibling.focus();
}

export function focusNext(focused, lockParent = false) {
    let nextSibling = focused.nextElementSibling;
    if (nextSibling == null) {
        if (!lockParent) {
            focusNext(focused.parentElement, lockParent);
            return;
        }
        nextSibling = focused.parentElement.firstElementChild;
    }
    nextSibling.focus();
}

However, this is problematic. It may end up focusing non-focusable elements, and doesn't navigate cleverly. For example, it may end up focusing a non-focusable text area <div>. Is there a better solution?

Hydroper
  • 344
  • 2
  • 9
  • 1
    You may want to filter the next or previous sibling based on the "focusability" of the element. See [this question](https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194) to get an idea on how to detect if an element is focusable or not – Francisco Hanna Dec 01 '22 at 13:12
  • 1
    before you do this, consider that the arrow keys are used to switch between options, for example in a select list or a group of radio buttons. Don't make it harder for users that are relying on the keyboard to navigate – Jenny Dec 01 '22 at 17:02

1 Answers1

0

I've not found any built-in way of doing this, so I had to use the NPM package focus-lock:

import {focusNextElement, focusPrevElement} from '../focuslock/index.js';

These functions worked fine, and only navigated elements from the web page, or limited to specified container, as expected.

Since I'm not directly using a NPM package for my project this time, I had to precompile the focus-lock package (npm run build on their GitHub repository), pick the es2015 build, remove the unneeded d.ts files and add .js extension to all imports.

Hydroper
  • 344
  • 2
  • 9