Fixed #5274 - SelectButton: (accessibility) disabled mode focus defects
parent
e53bcf0fd5
commit
84d3e7fd15
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue