Base: Navigate DOM tree with arrows

This commit is contained in:
Chase Willden 2024-09-26 19:35:58 -06:00 committed by Sam Atkins
parent 579a289d3d
commit 9d82e81124
Notes: github-actions[bot] 2024-09-27 12:34:28 +00:00

View file

@ -767,31 +767,48 @@ document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("keydown", event => {
const UP_ARROW_KEYCODE = 38;
const DOWN_ARROW_KEYCODE = 40;
const RIGHT_ARROW_KEYCODE = 39;
const LEFT_ARROW_KEYCODE = 37;
const RETURN_KEYCODE = 13;
const SPACE_KEYCODE = 32;
const move = delta => {
let selectedIndex = visibleDOMNodes.indexOf(selectedDOMNode);
if (selectedIndex < 0) {
return;
}
let newIndex = selectedIndex + delta;
if (visibleDOMNodes[newIndex]) {
inspectDOMNode(visibleDOMNodes[newIndex]);
}
};
if (document.activeElement.tagName !== "INPUT") {
if (event.keyCode == UP_ARROW_KEYCODE || event.keyCode == DOWN_ARROW_KEYCODE) {
let selectedIndex = visibleDOMNodes.indexOf(selectedDOMNode);
if (selectedIndex < 0) {
return;
}
const isSummary = selectedDOMNode.parentNode.tagName === "SUMMARY";
const isDiv = selectedDOMNode.parentNode.tagName === "DIV";
let newIndex;
if (event.keyCode == UP_ARROW_KEYCODE) {
newIndex = selectedIndex - 1;
} else if (event.keyCode == DOWN_ARROW_KEYCODE) {
newIndex = selectedIndex + 1;
}
if (visibleDOMNodes[newIndex]) {
inspectDOMNode(visibleDOMNodes[newIndex]);
}
if (event.keyCode == UP_ARROW_KEYCODE) {
move(-1);
} else if (event.keyCode == DOWN_ARROW_KEYCODE) {
move(1);
} else if (event.keyCode == RETURN_KEYCODE || event.keyCode == SPACE_KEYCODE) {
if (selectedDOMNode.parentNode.tagName === "SUMMARY") {
if (isSummary) {
selectedDOMNode.parentNode.click();
}
} else if (event.keyCode == RIGHT_ARROW_KEYCODE) {
if (isSummary && selectedDOMNode.parentNode.parentNode.open === false) {
selectedDOMNode.parentNode.click();
} else if (selectedDOMNode.parentNode.parentNode.open === true && !isDiv) {
move(1);
}
} else if (event.keyCode == LEFT_ARROW_KEYCODE) {
if (isSummary && selectedDOMNode.parentNode.parentNode.open === true) {
selectedDOMNode.parentNode.click();
} else if (selectedDOMNode.parentNode.parentNode.open === false || isDiv) {
move(-1);
}
}
}
});