Refactor #4953 - For Dialog

components/lib/dialog/Dialog.vue

@@ -80,12 +80,18 @@ export default {
     },
     data() {
         return {
+            id: this.$attrs.id,
             containerVisible: this.visible,
             maximized: false,
             focusableMax: null,
             focusableClose: null
         };
     },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        }
+    },
     documentKeydownListener: null,
     container: null,
     mask: null,
@@ -118,6 +124,8 @@ export default {
         this.mask = null;
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.breakpoints) {
             this.createStyle();
         }
@@ -380,12 +388,8 @@ export default {
         maximizeIconComponent() {
             return this.maximized ? (this.minimizeIcon ? 'span' : 'WindowMinimizeIcon') : this.maximizeIcon ? 'span' : 'WindowMaximizeIcon';
         },
-
-        ariaId() {
-            return UniqueComponentId();
-        },
         ariaLabelledById() {
-            return this.header != null || this.$attrs['aria-labelledby'] !== null ? this.ariaId + '_header' : null;
+            return this.header != null || this.$attrs['aria-labelledby'] !== null ? this.id + '_header' : null;
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;