Accessibility for Password

pull/2760/head
Tuğçe Küçükoğlu 2022-07-05 15:18:05 +03:00
parent 96177cbc60
commit 3a2dd2f159
4 changed files with 7 additions and 20 deletions

View File

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

View File

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

View File

@ -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() {

View File

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