Refactor for accessibility

src/components/accordion/Accordion.vue

@@ -61,7 +61,6 @@ export default {
     },
     data() {
         return {
-            id: UniqueComponentId(),
             d_activeIndex: this.activeIndex
         }
     },
@@ -70,9 +69,6 @@ export default {
             this.d_activeIndex = newValue;
         }
     },
-    mounted() {
-        this.id = this.$attrs.id || this.id;
-    },
     methods: {
         isAccordionTab(child) {
             return child.type.name === 'AccordionTab';
@@ -240,6 +236,9 @@ export default {
 
                 return tabs;
             }, []);
+        },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
         }
     },
     directives: {

src/components/autocomplete/AutoComplete.vue

@@ -201,7 +201,6 @@ export default {
     dirty: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionIndex: -1,
             focusedMultipleOptionIndex: -1,
@@ -221,8 +220,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     updated() {
@@ -908,6 +905,9 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },

src/components/cascadeselect/CascadeSelect.vue

@@ -129,7 +129,6 @@ export default {
     focusOnHover: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
             activeOptionPath: [],
@@ -143,8 +142,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     beforeUnmount() {
@@ -760,6 +757,9 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionInfo.index !== -1 ? `${this.id}${ObjectUtils.isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
         }

src/components/dropdown/Dropdown.vue

@@ -197,7 +197,6 @@ export default {
     focusOnHover: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionIndex: -1,
             filterValue: null,
@@ -213,8 +212,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     updated() {
@@ -874,6 +871,9 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },

src/components/listbox/Listbox.vue

@@ -142,7 +142,6 @@ export default {
     focusOnHover: false,
     data() {
         return {
-            id: UniqueComponentId(),
             filterValue: null,
             focused: false,
             focusedOptionIndex: -1
@@ -154,8 +153,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     methods: {
@@ -685,6 +682,9 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },

src/components/multiselect/MultiSelect.vue

@@ -247,7 +247,6 @@ export default {
     focusOnHover: false,
     data() {
         return {
-            id: UniqueComponentId(),
             focused: false,
             focusedOptionIndex: -1,
             headerCheckboxFocused: false,
@@ -261,8 +260,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.autoUpdateModel();
     },
     beforeUnmount() {
@@ -1027,6 +1024,9 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.modelValue.length) : this.emptySelectionMessageText;
         },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },

src/components/tabview/TabView.vue

@@ -67,7 +67,6 @@ export default {
     },
     data() {
         return {
-            id: UniqueComponentId(),
             d_activeIndex: this.activeIndex,
             focusedTabIndex: -1,
             isPrevButtonDisabled: true,
@@ -82,8 +81,6 @@ export default {
         }
     },
     mounted() {
-        this.id = this.$attrs.id || this.id;
-
         this.updateInkBar();
     },
     updated() {
@@ -304,6 +301,9 @@ export default {
         },
         nextButtonAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
+        },
+        id() {
+            return this.$attrs.id || UniqueComponentId();
         }
     },
     directives: {