Accessibility for Password

src/components/password/Password.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" :id="id" :style="style">
+    <div :class="containerClass" v-bind="passwordProps">
-        <PInputText ref="input" :id="inputId" :class="inputFieldClass" :style="inputStyle" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
+        <PInputText ref="input" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@@ -27,18 +27,9 @@ import Portal from 'primevue/portal';
 
 export default {
     name: 'Password',
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
-    inheritAttrs: false,
     props: {
         modelValue: String,
-        id: {
-            type: String,
-            default: null
-        },
-        inputId: {
-            type: String,
-            default: null
-        },
         promptLabel: {
             type: String,
             default: null
@@ -83,11 +74,13 @@ export default {
             type: String,
             default: 'pi pi-eye'
         },
-        inputClass: null,
+        panelClass: String,
-        inputStyle: null,
+        disabled: {
-        style: null,
+            type: Boolean,
-        class: String,
+            default: false
-        panelClass: String
+        },
+        passwordProps: null,
+        inputProps: null
     },
     data() {
         return {
@@ -159,17 +152,21 @@ export default {
         onInput(event)  {
             this.$emit('update:modelValue', event.target.value)
         },
-        onFocus() {
+        onFocus(event) {
             this.focused = true;
             if (this.feedback) {
                 this.overlayVisible = true;
             }
+
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
             if (this.feedback) {
                 this.overlayVisible = false;
             }
+
+            this.$emit('blur', event);
         },
         onKeyUp(event) {
             if (this.feedback) {
@@ -269,15 +266,15 @@ export default {
     },
     computed: {
         containerClass() {
-            return ['p-password p-component p-inputwrapper', this.class, {
+            return ['p-password p-component p-inputwrapper', {
                 'p-inputwrapper-filled': this.filled,
                 'p-inputwrapper-focus': this.focused,
                 'p-input-icon-right': this.toggleMask
             }];
         },
         inputFieldClass() {
-            return ['p-password-input', this.inputClass, {
+            return ['p-password-input', {
-                'p-disabled': this.$attrs.disabled
+                'p-disabled': this.disabled
             }];
         },
         panelStyleClass() {