From 84d3e7fd151bc615ce8183aa63971184449d5ed7 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 14 Feb 2024 12:17:38 +0300
Subject: [PATCH] Fixed #5274 - SelectButton: (accessibility) disabled mode
 focus defects

---
 components/lib/selectbutton/SelectButton.vue | 53 ++++++++++++++------
 1 file changed, 38 insertions(+), 15 deletions(-)

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);