Permalink
Browse files

feat(form-input): support aria-invalid attribute (#610)

* [form-input] Add aria-invalid feature

* [form-input] aria-invalid docs
  • Loading branch information...
tmorehouse committed Jul 1, 2017
1 parent c29c286 commit d676d8fc9424804b979d8d891afdf5242d472088
Showing with 23 additions and 0 deletions.
  1. +9 −0 docs/components/form-input/README.md
  2. +14 −0 lib/components/form-input.vue
@@ -104,3 +104,12 @@ could include a hint about state in the form control's `<label>` text itself, or
providing an additional help text block. Specifically for assistive technologies,
invalid form controls can also be assigned an `aria-invalid="true"` attribute.
### ARIA `aria-invalid` attribute
When `form-input` has an invalid contextual state (i.e. `danger`) you may also
want to set the `<b-form-input>` prop `invalid` to `true`, or a string value.
Supported `invaid` values are:
- `false` (default) No errors detected
- `true` The value has failed validation.
- `grammar` A grammatical error has been detected.
- `spelling` A spelling error has been detected.
@@ -6,6 +6,7 @@
:name="name"
:id="id || null"
:disabled="disabled"
:aria-invalid="ariaInvalid"
:readonly="readonly"
:is="textarea ? 'textarea' : 'input'"
:class="inputClass"
@@ -43,6 +44,15 @@
this.size ? `form-control-${this.size}` : null,
this.state ? `form-control-${this.state}` : null
];
},
ariaInvalid() {
if (this.invalid === false) {
return null;
}
if (this.invalid === true) {
return 'true';
}
return this.invalid;
}
},
methods: {
@@ -90,6 +100,10 @@
type: String,
default: null
},
invalid: {
type: [Boolean, String],
default: false
},
readonly: {
type: Boolean,
default: false

0 comments on commit d676d8f

Please sign in to comment.