Accessibility for Password

api-generator/components/password.js

@@ -5,12 +5,6 @@ const PasswordProps = [
         default: "null",
         description: "Value of the component."
     },
-    {
-        name: "id",
-        type: "string",
-        default: "null",
-        description: "Unique identifier of the element."
-    },
     {
         name: "inputId",
         type: "string",

src/components/password/Password.d.ts

@@ -8,10 +8,6 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Value of the component.
      */
     modelValue?: Nullable<string>;
-    /**
-     * Unique identifier of the element.
-     */
-    id?: string | undefined;
     /**
      * Identifier of the underlying input element.
      */

src/components/password/Password.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" v-bind="passwordProps">
-        <PInputText ref="input" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
+    <div :class="containerClass">
+        <PInputText ref="input" :id="inputId" :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">
@@ -30,6 +30,10 @@ export default {
     emits: ['update:modelValue', 'change', 'focus', 'blur'],
     props: {
         modelValue: String,
+        inputId: {
+            type: String,
+            default: null
+        },
         promptLabel: {
             type: String,
             default: null
@@ -79,7 +83,6 @@ export default {
             type: Boolean,
             default: false
         },
-        passwordProps: null,
         inputProps: null
     },
     data() {

src/views/password/PasswordDoc.vue

@@ -82,12 +82,6 @@ import Password from 'primevue/password';
                         <td>null</td>
                         <td>Value of the component.</td>
                     </tr>
-                    <tr>
-                        <td>id</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Unique identifier of the element.</td>
-                    </tr>
                     <tr>
                         <td>inputId</td>
                         <td>string</td>
@@ -259,7 +253,7 @@ import Password from 'primevue/password';
 
 <pre v-code><code>
 &lt;label for="pwd1"&gt;Password&lt;/label&gt;
-&lt;Password id="pwd1" /&gt;
+&lt;Password inputId="pwd1" /&gt;
 
 &lt;span id="pwd2"&gt;Password&lt;/span&gt;
 &lt;Password aria-labelledby="pwd2" /&gt;