Refactor #5437 - For SelectButton

components/lib/selectbutton/SelectButton.vue

@@ -1,19 +1,13 @@
 <template>
-    <div ref="container" :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
+    <div :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptmi('root')">
-        <div
+        <button
             v-for="(option, i) of options"
             :key="getOptionRenderKey(option)"
             v-ripple
-            :tabindex="findTabindex(option, i)"
+            :aria-pressed="isSelected(option)"
-            :aria-label="getOptionLabel(option, i)"
-            :role="multiple ? 'checkbox' : 'radio'"
-            :aria-checked="isSelected(option)"
             :aria-disabled="isOptionDisabled(option)"
             :class="cx('button', { option })"
             @click="onOptionSelect($event, option, i)"
-            @keydown="onKeydown($event, option, i)"
-            @focus="onFocus($event)"
-            @blur="onBlur($event, option)"
             v-bind="getPTOptions(option, 'button')"
             :data-p-highlight="isSelected(option)"
             :data-p-disabled="isOptionDisabled(option)"
@@ -21,44 +15,22 @@
             <slot name="option" :option="option" :index="i" :class="cx('label')">
                 <span :class="cx('label')" v-bind="getPTOptions(option, 'label')">{{ getOptionLabel(option) }}</span>
             </slot>
-        </div>
+        </button>
     </div>
 </template>
 
 <script>
 import Ripple from 'primevue/ripple';
-import { DomHandler, ObjectUtils } from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 import BaseSelectButton from './BaseSelectButton.vue';
 
 export default {
     name: 'SelectButton',
     extends: BaseSelectButton,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'focus', 'blur', 'change'],
+    emits: ['update:modelValue', 'change'],
-    data() {
-        return {
-            focusedIndex: 0
-        };
-    },
-    mounted() {
-        this.defaultTabIndexes();
-    },
     methods: {
-        defaultTabIndexes() {
+        getOptionLabel(option) {
-            let opts = DomHandler.find(this.$refs.container, '[data-pc-section="button"]');
-            let firstHighlight = DomHandler.findSingle(this.$refs.container, '[data-p-highlight="true"]');
-
-            for (let i = 0; i < opts.length; i++) {
-                if ((DomHandler.getAttribute(opts[i], 'data-p-highlight') === true && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
-                    this.focusedIndex = i;
-                }
-            }
-        },
-        getOptionLabel(option, index) {
-            if (this.$parent.$name === 'DataViewLayoutOptions') {
-                return index === 0 ? this.$parent.listViewAriaLabel : this.$parent.gridViewAriaLabel;
-            }
-
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
         },
         getOptionValue(option) {
@@ -122,89 +94,6 @@ export default {
             }
 
             return selected;
-        },
-        onKeydown(event, option, index) {
-            switch (event.code) {
-                case 'Space': {
-                    this.onOptionSelect(event, option, index);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowDown':
-
-                case 'ArrowRight': {
-                    this.onArrowRightKey(event.target);
-                    event.preventDefault();
-                    break;
-                }
-
-                case 'ArrowUp':
-
-                case 'ArrowLeft': {
-                    this.onArrowLeftKey(event.target);
-                    event.preventDefault();
-                    break;
-                }
-
-                default:
-                    //no op
-                    break;
-            }
-        },
-        onArrowRightKey(target) {
-            const nextEl = this.findNextElement(target);
-
-            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;
-            }
-
-            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);
-        },
-        onBlur(event, option) {
-            if (event.target && event.relatedTarget && event.target.parentElement !== event.relatedTarget.parentElement) {
-                this.defaultTabIndexes();
-            }
-
-            this.$emit('blur', event, option);
-        },
-        findTabindex(option, index) {
-            return this.disabled || this.isOptionDisabled(option) || index !== this.focusedIndex ? '-1' : '0';
         }
     },
     computed: {