如何聚焦到前一个或下一个可聚焦的兄弟或相关元素

Question

我想在我的web应用程序中使用向上或向下键导航元素之间的焦点(而不仅仅是Tab和Shift + Tab)。我可以通过使用以下帮助器来实现:

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();
}

然而，这是有问题的。它最终可能会聚焦不可聚焦的元素，并且不能巧妙地导航。例如，它可能最终聚焦一个不可聚焦的文本区域<div>。有没有更好的解决方案?

Answer 1

我没有找到任何内置的方法来做到这一点，所以我不得不使用NPM包focus-lock:

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

这些函数工作得很好，并且只从网页中导航元素，或者限制在指定的容器中，如预期的那样。

由于我这次没有直接使用NPM包，我不得不预编译focus-lock包(npm run build在他们的GitHub存储库上)，选择es2015构建，删除不需要的d.ts文件并添加.js扩展到所有import。