diff --git a/components/lib/selectbutton/SelectButton.vue b/components/lib/selectbutton/SelectButton.vue index c4c68c822..61a8462ea 100755 --- a/components/lib/selectbutton/SelectButton.vue +++ b/components/lib/selectbutton/SelectButton.vue @@ -4,7 +4,7 @@ v-for="(option, i) of options" :key="getOptionRenderKey(option)" v-ripple - :tabindex="i === focusedIndex ? '0' : '-1'" + :tabindex="disabled || isOptionDisabled(option) || i !== focusedIndex ? '-1' : '0'" :aria-label="getOptionLabel(option)" :role="multiple ? 'checkbox' : 'radio'" :aria-checked="isSelected(option)" @@ -130,7 +130,7 @@ export default { case 'ArrowDown': case 'ArrowRight': { - this.changeTabIndexes(event, 'next'); + this.onArrowRightKey(event.target); event.preventDefault(); break; } @@ -138,7 +138,7 @@ export default { case 'ArrowUp': case 'ArrowLeft': { - this.changeTabIndexes(event, 'prev'); + this.onArrowLeftKey(event.target); event.preventDefault(); break; } @@ -148,23 +148,46 @@ export default { break; } }, - changeTabIndexes(event, direction) { - let firstTabableChild, index; + onArrowRightKey(target) { + const nextEl = this.findNextElement(target); - for (let i = 0; i <= this.$refs.container.children.length - 1; i++) { - if (this.$refs.container.children[i].getAttribute('tabindex') === '0') firstTabableChild = { elem: this.$refs.container.children[i], index: i }; + if (nextEl) { + this.focusedIndex = ObjectUtils.findIndexInList(nextEl, this.findAllElements()); + DomHandler.focus(nextEl); + } + }, + onArrowLeftKey(target) { + const prevEl = this.findPrevElement(target); + + if (prevEl) { + this.focusedIndex = ObjectUtils.findIndexInList(prevEl, this.findAllElements()); + DomHandler.focus(prevEl); + } + }, + findAllElements() { + return DomHandler.find(this.$refs.container, '[data-pc-section="button"]'); + }, + findNextElement(target) { + if (target.nextElementSibling) { + if (DomHandler.getAttribute(target.nextElementSibling, 'data-p-disabled')) { + return this.findNextElement(target.nextElementSibling); + } + + return target.nextElementSibling; } - if (direction === 'prev') { - if (firstTabableChild.index === 0) index = this.$refs.container.children.length - 1; - else index = firstTabableChild.index - 1; - } else { - if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0; - else index = firstTabableChild.index + 1; + return null; + }, + findPrevElement(target) { + if (target.previousElementSibling) { + if (DomHandler.getAttribute(target.previousElementSibling, 'data-p-disabled')) { + return this.findPrevElement(target.previousElementSibling); + } + + return target.previousElementSibling; } - this.focusedIndex = index; - this.$refs.container.children[index].focus(); + return null; }, onFocus(event) { this.$emit('focus', event);