vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #5274 - SelectButton: (accessibility) disabled mode focus defects

pull/5282/head
tugcekucukoglu 2024-02-14 12:17:38 +03:00
parent e53bcf0fd5
commit 84d3e7fd15
1 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/lib/selectbutton/SelectButton.vue
View File

@ -4,7 +4,7 @@
v-for="(option, i) of options" v-for="(option, i) of options"
:key="getOptionRenderKey(option)" :key="getOptionRenderKey(option)"
v-ripple v-ripple
:tabindex="i === focusedIndex ? '0' : '-1'" :tabindex="disabled || isOptionDisabled(option) || i !== focusedIndex ? '-1' : '0'"
:aria-label="getOptionLabel(option)" :aria-label="getOptionLabel(option)"
:role="multiple ? 'checkbox' : 'radio'" :role="multiple ? 'checkbox' : 'radio'"
:aria-checked="isSelected(option)" :aria-checked="isSelected(option)"
@ -130,7 +130,7 @@ export default {
case 'ArrowDown': case 'ArrowDown':
case 'ArrowRight': { case 'ArrowRight': {
this.changeTabIndexes(event, 'next'); this.onArrowRightKey(event.target);
event.preventDefault(); event.preventDefault();
break; break;
} }
@ -138,7 +138,7 @@ export default {
case 'ArrowUp': case 'ArrowUp':
case 'ArrowLeft': { case 'ArrowLeft': {
this.changeTabIndexes(event, 'prev'); this.onArrowLeftKey(event.target);
event.preventDefault(); event.preventDefault();
break; break;
} }
@ -148,23 +148,46 @@ export default {
break; break;
} }
}, },
changeTabIndexes(event, direction) { onArrowRightKey(target) {
let firstTabableChild, index; const nextEl = this.findNextElement(target);
for (let i = 0; i <= this.$refs.container.children.length - 1; i++) { if (nextEl) {
if (this.$refs.container.children[i].getAttribute('tabindex') === '0') firstTabableChild = { elem: this.$refs.container.children[i], index: i }; 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') { return null;
if (firstTabableChild.index === 0) index = this.$refs.container.children.length - 1; },
else index = firstTabableChild.index - 1; findPrevElement(target) {
} else { if (target.previousElementSibling) {
if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0; if (DomHandler.getAttribute(target.previousElementSibling, 'data-p-disabled')) {
else index = firstTabableChild.index + 1; return this.findPrevElement(target.previousElementSibling);
}
return target.previousElementSibling;
} }
this.focusedIndex = index; return null;
this.$refs.container.children[index].focus();
}, },
onFocus(event) { onFocus(event) {
this.$emit('focus', event); this.$emit('focus', event);