Permalink
Browse files

feat(form controls): Add required attribute and related ARIA support (#…

…613)

* [form mixin] required prop

* [form-checkbox] required attribute support

* [form-file] Add required attribute support

* [form-input] Add required attribute support

* [form-radio] Add required attribute support

* [form-select] Add required attribute support

* [form-input-static] remove non-applicable props
  • Loading branch information...
tmorehouse committed Jul 1, 2017
1 parent 69e449f commit 3db70a48523fed5d992cb9fbc9d9ae2c30418a18
@@ -5,6 +5,8 @@
:name="name"
:value="value"
:disabled="disabled"
:required="required"
:aria-required="required ? 'true' : null"
:class="[custom?'custom-control-input':null]"
:checked="isChecked"
@change="handleChange">
@@ -20,6 +20,8 @@
:name="name"
:id="id || null"
:disabled="disabled"
:required="required"
:aria-required="required ? 'true' : null"
:accept="accept || null"
:multiple="multiple"
:webkitdirectory="directory"
@@ -8,10 +8,7 @@
</template>
<script>
import formMixin from '../mixins/form';
export default {
mixins: [formMixin],
computed: {
staticValue() {
return this.formatter ? this.formatter(this.value) : this.value;
@@ -25,6 +22,10 @@
}
},
props: {
id: {
type: String,
default: null
},
value: {
default: null
},
@@ -6,6 +6,8 @@
:name="name"
:id="id || null"
:disabled="disabled"
:required="required"
:aria-required="required ? 'true' : null"
:aria-invalid="ariaInvalid"
:readonly="readonly"
:is="textarea ? 'textarea' : 'input'"
@@ -1,5 +1,10 @@
<template>
<div :id="id || null" :class="inputClass" role="radiogroup" :aria-invalid="ariaInvalid">
<div :id="id || null"
:class="inputClass"
role="radiogroup"
:aria-required="required ? 'true' : null"
:aria-invalid="ariaInvalid"
>
<label :class="[checkboxClass, custom?'custom-radio':null]"
v-for="option in formOptions"
>
@@ -9,8 +14,9 @@
type="radio"
v-model="localValue"
:value="option.value"
:name="option.name"
:disabled="option.disabled"
:name="name"
:required="name && required"
:disabled="option.disabled || disabled"
@change="$emit('change', returnObject ? option : option.value)"
>
<span v-if="custom" class="custom-control-indicator" aria-hidden="true"></span>
@@ -4,6 +4,8 @@
:id="id || null"
v-model="localValue"
:disabled="disabled"
:required="required"
:aria-required="required ? 'true' : null"
:aria-invalid="ariaInvalid"
ref="input"
>
@@ -36,9 +38,6 @@
];
},
ariaInvalid() {
if (this.invalid === false || this.invalid === 'false') {
return null;
}
if (this.invalid === true || this.invalid === 'true') {
return 'true';
}
@@ -8,6 +8,10 @@ export default {
},
disabled: {
type: Boolean
},
required: {
type: Boolean,
default: false
}
}
};

0 comments on commit 3db70a4

Please sign in to comment.