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

primefaces · Feb 14, 2024 · 84d3e7f · 84d3e7f
1 parent e53bcf0
commit 84d3e7f
Showing 1 changed file with 38 additions and 15 deletions.
diff --git 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,15 +130,15 @@ export default {
                 case 'ArrowDown':
 
                 case 'ArrowRight': {
-                    this.changeTabIndexes(event, 'next');
+                    this.onArrowRightKey(event.target);
                     event.preventDefault();
                     break;
                 }
 
                 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 (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;
+            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);
+                }
 
-            this.focusedIndex = index;
-            this.$refs.container.children[index].focus();
+                return target.nextElementSibling;
+            }
+
+            return null;
+        },
+        findPrevElement(target) {
+            if (target.previousElementSibling) {
+                if (DomHandler.getAttribute(target.previousElementSibling, 'data-p-disabled')) {
+                    return this.findPrevElement(target.previousElementSibling);
+                }
+
+                return target.previousElementSibling;
+            }
+
+            return null;
         },
         onFocus(event) {
             this.$emit('focus', event);