diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js index feef180630..39c187479d 100644 --- a/src/scripts/keyboardNavigation.js +++ b/src/scripts/keyboardNavigation.js @@ -50,6 +50,11 @@ const NavigationKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']; */ const InteractiveElements = ['INPUT', 'TEXTAREA']; +/** + * Types of INPUT element for which navigation shouldn't be constrained. + */ +const NonInteractiveInputElements = ['button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'reset', 'submit']; + let hasFieldKey = false; try { hasFieldKey = 'key' in new KeyboardEvent('keydown'); @@ -84,6 +89,24 @@ export function isNavigationKey(key) { return NavigationKeys.indexOf(key) != -1; } +/** + * Returns _true_ if the element is interactive. + * + * @param {Element} element - Element. + * @return {boolean} _true_ if the element is interactive. + */ +export function isInteractiveElement(element) { + if (element && InteractiveElements.includes(element.tagName)) { + if (element.tagName === 'INPUT') { + return !NonInteractiveInputElements.includes(element.type); + } + + return true; + } + + return false; +} + export function enable() { window.addEventListener('keydown', function (e) { const key = getKeyName(e); @@ -97,7 +120,7 @@ export function enable() { switch (key) { case 'ArrowLeft': - if (!InteractiveElements.includes(document.activeElement?.tagName)) { + if (!isInteractiveElement(document.activeElement)) { inputManager.handleCommand('left'); } else { capture = false; @@ -107,7 +130,7 @@ export function enable() { inputManager.handleCommand('up'); break; case 'ArrowRight': - if (!InteractiveElements.includes(document.activeElement?.tagName)) { + if (!isInteractiveElement(document.activeElement)) { inputManager.handleCommand('right'); } else { capture = false;