From 20edb1c2474195dfcbecce5b95f0188970e7fadd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 29 Jul 2022 17:16:14 +0300
Subject: [PATCH] Accessibility Password: aria-* properties added

---
 api-generator/components/password.js  | 18 ++++++++++++++++++
 src/components/password/Password.d.ts | 20 ++++++++++++++++----
 src/components/password/Password.vue  | 16 +++++++++++-----
 src/views/password/PasswordDoc.vue    |  6 ++++++
 4 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/api-generator/components/password.js b/api-generator/components/password.js
index b50fe93e8..335df8a4e 100644
--- a/api-generator/components/password.js
+++ b/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."
     }
 ];
 
diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
index 8eb70934d..c386a9ce6 100755
--- a/src/components/password/Password.d.ts
+++ b/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.
      */
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index e3b083f34..0dcf8ae79 100755
--- a/src/components/password/Password.vue
+++ b/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,
-        panelStyle: String,
+        panelId: null,
+        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: {
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index 181fe346b..2ff667cef 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/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>