diff --git a/js/classes/keyboard-helpers.js b/js/classes/keyboard-helpers.js index 89cb3a0..35f53a0 100644 --- a/js/classes/keyboard-helpers.js +++ b/js/classes/keyboard-helpers.js @@ -40,6 +40,7 @@ class KeyboardHelpers { // private options this.proxyActionElements = { + selectFocussed: '[data-kh-proxy="selectFocussed"]', selectNext: '[data-kh-proxy="selectNext"]', selectPrevious: '[data-kh-proxy="selectPrevious"]' }; @@ -384,11 +385,20 @@ class KeyboardHelpers { registerProxyKeyboardActions() { const proxyActions = Object.keys(this.proxyActionElements); + if (!this.selectionFollowsFocus) { + this.keyboardNavigableElements.forEach((keyboardNavigableElement) => { + // select on click + keyboardNavigableElement.setAttribute('data-kh-proxy', 'selectFocussed'); + }); + } + proxyActions.forEach((proxyAction) => { - const proxyActionElement = document.querySelector(`#${this.instanceId} ${this.proxyActionElements[proxyAction]}`); + const proxyActionElements = document.querySelectorAll(`#${this.instanceId} ${this.proxyActionElements[proxyAction]}`); - if (proxyActionElement !== null) { - proxyActionElement.addEventListener('click', this[proxyAction].bind(this)); + if (proxyActionElements.length) { + proxyActionElements.forEach((proxyActionElement) => { + proxyActionElement.addEventListener('click', this[proxyAction].bind(this)); + }); } }); } @@ -416,6 +426,11 @@ class KeyboardHelpers { focussed.setAttribute(selectedAttrProp, selectedAttrVal); + // if focus was result of a click action + if (!this.selectionFollowsFocus) { + this.updateRovingTabIndex(focussed); + } + if (typeof e === 'object') { if (this.toggleAfterSelected) { this.toggleClosed();