Accessibility Password: aria-* properties added

api-generator/components/password.js

@@ -77,6 +77,12 @@ const PasswordProps = [
         default: "pi pi-eye",
         description: "Icon to show displaying the password as plain text."
     },
+    {
+        name: "inputId",
+        type: "string",
+        default: "null",
+        description: "Identifier of the underlying input element."
+    },
     {
         name: "inputStyle",
         type: "any",
@@ -89,11 +95,23 @@ const PasswordProps = [
         default: "null",
         description: "Style class of the input field."
     },
+    {
+        name: "panelId",
+        type: "string",
+        default: "null",
+        description: "Identifier of the underlying overlay panel element."
+    },
     {
         name: "panelClass",
         type: "string",
         default: "null",
         description: "Style class of the overlay panel."
+    },
+    {
+        name: "panelStyle",
+        type: "string",
+        default: "null",
+        description: "Inline style of the overlay panel."
     }
 ];
 

src/components/password/Password.d.ts

@@ -8,10 +8,6 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Value of the component.
      */
     modelValue?: Nullable<string>;
-    /**
-     * Identifier of the underlying input element.
-     */
-    inputId?: string | undefined;
     /**
      * Text to prompt password entry. Defaults to PrimeVue Locale configuration.
      */
@@ -63,6 +59,10 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Default value is 'pi pi-eye'.
      */
     showIcon?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
     /**
      * Inline style of the input field.
      */
@@ -71,10 +71,22 @@ export interface PasswordProps extends InputHTMLAttributes {
      * Style class of the input field.
      */
     inputClass?: any | undefined;
+    /**
+     * Identifier of the underlying overlay panel element.
+     */
+    panelId?: string | undefined;
     /**
      * Style class of the overlay panel.
      */
     panelClass?: any | undefined;
+    /**
+     * Inline style of the overlay panel.
+     */
+    panelStyle?: any | undefined;
+    /**
+     * 
+     */
+    panelProps?: object | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */

src/components/password/Password.vue

@@ -1,13 +1,15 @@
 <template>
     <div :class="containerClass">
-        <PInputText ref="input" :id="inputId" :type="inputType" :class="inputClass" :style="inputStyle" :value="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
+        <PInputText ref="input" :id="inputId" :type="inputType" :class="inputClass" :style="inputStyle" :value="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+            :aria-controls="(panelProps&&panelProps.id)||panelId||panelUniqueId" :aria-expanded="overlayVisible" :aria-haspopup="true"
+            @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
         <span class="p-hidden-accessible" aria-live="polite">
             {{infoText}}
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" :class="panelStyleClass" :style="panelStyle" v-if="overlayVisible" @click="onOverlayClick" v-bind="panelProps">
+                <div :ref="overlayRef" :id="panelId||panelUniqueId" :class="panelStyleClass" :style="panelStyle" v-if="overlayVisible" @click="onOverlayClick" v-bind="panelProps">
                     <slot name="header"></slot>
                     <slot name="content">
                         <div class="p-password-meter">
@@ -23,7 +25,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils,UniqueComponentId} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import InputText from 'primevue/inputtext';
 import Portal from 'primevue/portal';
@@ -86,8 +88,9 @@ export default {
         inputClass: null,
         inputStyle: null,
         inputProps: null,
-        panelClass: String,
+        panelId: null,
-        panelStyle: String,
+        panelClass: null,
+        panelStyle: null,
         panelProps: null,
         'aria-labelledby': {
             type: String,
@@ -322,6 +325,9 @@ export default {
         },
         promptText() {
             return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
+        },
+        panelUniqueId() {
+            return UniqueComponentId() + '_panel';
         }
     },
     components: {

src/views/password/PasswordDoc.vue

@@ -173,6 +173,12 @@ import Password from 'primevue/password';
                         <td>null</td>
                         <td>Inline style of the input field.</td>
                     </tr>
+                    <tr>
+                        <td>panelId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying overlay panel element.</td>
+                    </tr>
                     <tr>
                         <td>panelClass</td>
                         <td>string</td>