Permalink
Browse files

feat(form-select): Add aria-invalid support (#611)

* [form-select] add aria-invalid support

* [form-select] Docs update
  • Loading branch information...
tmorehouse committed Jul 1, 2017
1 parent d676d8f commit 1d20f8ae54ba0d58585570e54fdf18a9729b6b4d
Showing with 29 additions and 4 deletions.
  1. +15 −4 docs/components/form-select/README.md
  2. +14 −0 lib/components/form-select.vue
@@ -94,6 +94,7 @@ To control width, place the input inside standard Bootstrap grid column.
### Contextual States
Bootstrap includes validation styles for danger, warning, and success states on most form controls.
The `<b-select>` will need to be wrapped inside a `<b-form-fieldset>` component.
Generally speaking, you’ll want to use a particular state for specific types of feedback:
- `danger` is great for when there’s a blocking or required field. A user must fill in
@@ -103,8 +104,9 @@ soft validation before a user attempts to submit a form.
- `success` is ideal for situations when you have per-field validation throughout a form
and want to encourage a user through the rest of the fields.
To apply one of the contextual steates on `b-form-select`, set the `state` prop
to `danger`, `warning`, or `success`.
To apply one of the contextual steates on `<b-form-select>`, set the `state` prop
to `danger`, `warning`, or `success` on the `<b-form-fieldset>` that wraps
the `<b-form-select>`.
#### Conveying contextual validation state to assistive technologies and colorblind users:
Using these contextual states to denote the state of a form control only provides
@@ -113,8 +115,17 @@ technologies - such as screen readers - or to colorblind users.
Ensure that an alternative indication of state is also provided. For instance, you
could include a hint about state in the form control's `<label>` text itself, or by
providing an additional help text block. Specifically for assistive technologies,
invalid form controls can also be assigned an `aria-invalid="true"` attribute.
providing an additional help text block (via `<b-form-fieldet>`). Specifically for
assistive technologies, invalid form controls can also be assigned
an `aria-invalid="true"` attribute (see below).
### ARIA `aria-invalid` attribute
When `<b-form-select>` has an invalid contextual state (i.e. `danger`) you may also
want to set the `<b-form-select>` prop `invalid` to `true`.
Supported `invaid` values are:
- `false` (default) No errors detected
- `true` The value has failed validation.
### Non custom select
Set the prop `plain` to have a native browser `<select>` rendered.
@@ -4,6 +4,7 @@
:id="id || null"
v-model="localValue"
:disabled="disabled"
:aria-invalid="ariaInvalid"
ref="input"
>
<option v-for="option in formOptions"
@@ -33,10 +34,23 @@
this.size ? `form-control-${this.size}` : null,
this.custom ? 'custom-select' : null
];
},
ariaInvalid() {
if (this.invalid === false || this.invalid === 'false') {
return null;
}
if (this.invalid === true || this.invalid === 'true') {
return 'true';
}
return null;
}
},
props: {
value: {},
invalid: {
type: [Boolean, String],
default: false
},
size: {
type: String,
default: null

0 comments on commit 1d20f8a

Please sign in to comment.