Accessibility for InputMask

src/components/inputmask/InputMask.vue

@@ -1,6 +1,5 @@
 <template>
-    <input :class="inputClass" v-bind="$attrs" @input="onInput" @focus="onFocus" @blur="onBlur"
-        @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" />
+    <input :class="inputClass" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" />
 </template>
 
 <script>
@@ -26,6 +25,10 @@ export default {
         unmask: {
             type: Boolean,
             default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
         }
     },
     methods: {
@@ -38,7 +41,7 @@ export default {
             this.$emit('update:modelValue', event.target.value);
         },
         onFocus(event) {
-            if (this.$attrs.readonly) {
+            if (this.readonly) {
                 return;
             }
 
@@ -79,7 +82,7 @@ export default {
             this.$emit('blur', event);
         },
         onKeyDown(event) {
-            if (this.$attrs.readonly) {
+            if (this.readonly) {
                 return;
             }
 
@@ -120,7 +123,7 @@ export default {
             this.$emit('keydown', event);
         },
         onKeyPress(event) {
-            if (this.$attrs.readonly) {
+            if (this.readonly) {
                 return;
             }
 
@@ -365,7 +368,7 @@ export default {
             return (this.partialPosition ? i : this.firstNonMaskPos);
         },
         handleInputChange(event) {
-            if (this.$attrs.readonly) {
+            if (this.readonly) {
                 return;
             }
 

src/views/inputmask/InputMaskDoc.vue

@@ -124,6 +124,41 @@ import InputMask from 'primevue/inputmask';
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+        <DevelopmentSection>
+            <h6>Screen Reader</h6>
+            <p>InputMask component renders a native input element that implicitly includes any passed prop. 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.</p>
+
+<pre v-code><code>
+&lt;label for="date"&gt;Date&lt;/label&gt;
+&lt;InputMask id="date" /&gt;
+
+&lt;span id="phone"&gt;Phone&lt;/span&gt;
+&lt;InputMask aria-labelledby="phone" /&gt;
+
+&lt;InputMask aria-label="Age" /&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>
+                    </tbody>
+                </table>
+            </div>
+        </DevelopmentSection>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
     </AppDoc>