Merge pull request #2722 from tugcekucukoglu/accessibility-password

Accessibility for Password

api-generator/components/password.js

@@ -5,6 +5,18 @@ 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",
+        default: "null",
+        description: "Identifier of the underlying input element."
+    },
     {
         name: "promptLabel",
         type: "string",

src/components/password/Password.d.ts

@@ -8,6 +8,14 @@ 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.
+     */
+    inputId?: string | undefined;
     /**
      * Text to prompt password entry. Defaults to PrimeVue Locale configuration.
      */

src/components/password/Password.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" :style="style">
+    <div :class="containerClass" :id="id" :style="style">
-        <PInputText ref="input" :class="inputFieldClass" :style="inputStyle" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
+        <PInputText ref="input" :id="inputId" :class="inputFieldClass" :style="inputStyle" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@@ -31,6 +31,14 @@ export default {
     inheritAttrs: false,
     props: {
         modelValue: String,
+        id: {
+            type: String,
+            default: null
+        },
+        inputId: {
+            type: String,
+            default: null
+        },
         promptLabel: {
             type: String,
             default: null
@@ -203,6 +211,12 @@ export default {
                 this.meter = meter;
                 this.infoText = label;
 
+                //escape
+                if (event.which === 27) {
+                    this.overlayVisible && (this.overlayVisible = false);
+                    return;
+                }
+
                 if (!this.overlayVisible) {
                     this.overlayVisible = true;
                 }

src/views/password/PasswordDoc.vue

@@ -82,6 +82,18 @@ 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>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
                     <tr>
                         <td>promptLabel</td>
                         <td>string</td>
@@ -239,6 +251,46 @@ import Password from 'primevue/password';
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+        <DevelopmentSection>
+            <h6>Screen Reader</h6>
+            <p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader
+            is notified about the changes to the strength of the password using a section that has <i>aria-live</i> while typing.</p>
+
+<pre v-code><code>
+&lt;label for="pwd1"&gt;Password&lt;/label&gt;
+&lt;Password id="pwd1" /&gt;
+
+&lt;span id="pwd2"&gt;Password&lt;/span&gt;
+&lt;Password aria-labelledby="pwd2" /&gt;
+
+&lt;Password aria-label="Password"/&gt;
+
+</code></pre>
+
+            <h6>Keyboard Support</h6>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><i>tab</i></td>
+                            <td>Moves focus to the input.</td>
+                        </tr>
+                        <tr>
+                            <td><i>escape</i></td>
+                            <td>Hides the strength meter if open.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DevelopmentSection>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
     </AppDoc>