Merge pull request #2722 from tugcekucukoglu/accessibility-password

Accessibility for Password
pull/2734/head
Tuğçe Küçükoğlu 2022-06-29 16:50:49 +03:00 committed by GitHub
commit 32bf6f1163
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 88 additions and 2 deletions

View File

@ -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",

View File

@ -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.
*/

View File

@ -1,6 +1,6 @@
<template>
<div :class="containerClass" :style="style">
<PInputText ref="input" :class="inputFieldClass" :style="inputStyle" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
<div :class="containerClass" :id="id" :style="style">
<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;
}

View File

@ -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>