Permalink
Browse files

fix(form fieldset): 'label for' prop not being applied to label - ARIA (

#669)

* fix(form-fieldset): ARIA 'for' attribute not being applied

When user supplied `for` was supplied it was not being applied to the label.

Also deprecated `for` in favour of `label-for`

* docs(form-fieldset): update docs to reflect 'label-for' prop

* docs(form-fieldset): Update live examples
  • Loading branch information...
tmorehouse committed Jul 7, 2017
1 parent 80c1ceb commit aafea81676adabdc3fd0a633658481e596f1c667
Showing with 54 additions and 16 deletions.
  1. +27 −13 docs/components/form-fieldset/README.md
  2. +27 −3 lib/components/form-fieldset.vue
@@ -8,13 +8,13 @@ as contextual state visual feedback.
```html
<template>
<b-form-fieldset
description="Let us know your full name."
id="fieldset1"
description="Let us know your name."
label="Enter your name"
:feedback="feedback"
:state="state"
:label-cols="3"
>
<b-form-input v-model="name"></b-form-input>
<b-form-input id="input1" :invalid="invalid" v-model="name"></b-form-input>
</b-form-fieldset>
</template>
@@ -25,8 +25,11 @@ export default {
return this.name.length ? '' : 'Please enter something';
},
state() {
return this.name.length ? 'success':'warning';
return this.name.length ? 'success' : 'warning';
},
invalid() {
return this.name.length ? null : 'true';
}
},
data: {
name: '',
@@ -38,29 +41,40 @@ export default {
```
**Example 2:** With contextual state on fieldset and textual input (feedback icon)
**Example 2:** Horizontal with contextual state on fieldset and textual input (feedback icon)
```html
<template>
<b-form-fieldset
id="fieldset2"
horizontal
label="Your full name"
description="Let us know your full name."
label="Enter your name"
:feedback="feedback"
:state="state"
:label-cols="3"
>
<b-form-input v-model="name" :state="state"></b-form-input>
<b-form-input id="input2" v-model.trim="name" :invalid="invalid" :state="state"></b-form-input>
</b-form-fieldset>
</template>
<script>
export default {
computed: {
feedback() {
return this.name.length ? '' : 'Please enter something';
if (this.name.length === 0) {
return 'Please enter your name';
}
return /\S+\s+\S+/.test(this.name) ? '' : 'Please enter both your first and last name';
},
state() {
return this.name.length ? 'success':'warning';
if (this.name.length === 0) {
return 'danger';
}
return /\S+\s+\S+/.test(this.name) ? 'success' : 'warning';
},
invalid() {
return /\S+\s+\S+/.test(this.name) ? null : 'true';
}
},
data: {
name: '',
@@ -109,10 +123,10 @@ value to the `state` property of the `<b-form-input>` control.
To enable auto-generation of `aria-*` attributes, **you must** supply a unique `id`
prop to `<b-form-fieldset>`.
To automatically associate the label to the first input element, you must provide
a unique `id` prop on the input component. You may optionally specify which containing
input component the label is for by setting the `<b-form-fieldset>` prop `for` to the
`id` string of the input.
To automatically associate the label to the first input component, you **must** provide
a unique `id` prop on the input component. You may manually specify which containing
input component the label is for by setting the `<b-form-fieldset>` prop `label-for`
to the value of the `id` string associated with the input or contaner element.
It is highly recommended that you provide a unique `id` prop on your input element.
@@ -35,6 +35,17 @@
<script>
import {warn} from '../utils';
const INPUT_SELECTOR = [
'[role="radiogroup"]',
'input',
'select',
'textarea',
'.form-control',
'.form-control-static',
'.dropdown',
'.dropup'
].join(',');
export default {
data() {
return {
@@ -89,9 +100,11 @@
},
methods: {
updateTarget() {
if (this.for && this.$el && this.$el.querySelector('#' + this.for)) {
return this.for;
if (this.labelFor) {
// User supplied for target
return this.labelFor;
}
// Else find first input with ID
const content = this.$refs.content;
if (!content) {
return null;
@@ -111,6 +124,17 @@
type: String,
default: null
},
labelFor: {
type: String,
default() {
if (this && this.for) {
// Deprecate prop for
warn("b-form-fieldet: prop 'for' has been deprecated. Use 'label-for' instead");
return this.for;
}
return null;
}
},
for: {
type: String,
default: null
@@ -159,7 +183,7 @@
},
inputSelector: {
type: String,
default: '[role="radiogroup"],input,select,textarea,.form-control,.form-control-static,.dropdown,.dropup'
default: INPUT_SELECTOR
}
}
};

0 comments on commit aafea81

Please sign in to comment.