Better accessibility labels

src/fields/abstractField.js

@@ -95,6 +95,29 @@ export default {
 				this.$set(this.schema, "errors", []); // Be reactive
 			else
 				this.schema.errors.splice(0); // Clear
+		},
+
+		getFieldID(schema) {
+			// Try to get a reasonable default id from the schema,
+			// then slugify it.
+			if (typeof schema.id !== "undefined") {
+				// If an ID's been explicitly set, use it unchanged
+				return schema.id;
+			} else {
+				return (schema.inputName || schema.label || schema.model)
+				.toString()
+				.trim()
+				.toLowerCase()
+				// Spaces to dashes
+				.replace(/ /g, "-")
+				// Multiple dashes to one
+				.replace(/-{2,}/g, "-")
+				// Remove leading & trailing dashes
+				.replace(/^-+|-+$/g, "")
+				// Remove anything that isn't a (English/ASCII) letter or number.
+				.replace(/([^a-zA-Z0-9\._-]+)/g, "")
+				;
+			}
 		}
 	}
 };

src/fields/fieldCleave.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>

src/fields/fieldDateTimePicker.vue

@@ -1,6 +1,6 @@
 <template lang="jade">
 	.input-group.date
-		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
+		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 		span.input-group-addon
 			span.glyphicon.glyphicon-calendar
 </template>
@@ -19,7 +19,7 @@
 		methods: {
 
 			getDateFormat() {
-				if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format) 
+				if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format)
 					return this.schema.dateTimePickerOptions.format;
 				else
 					return inputFormat;
@@ -62,7 +62,7 @@
 			if ($.fn.datetimepicker){
 				$(this.$el).data("DateTimePicker").destroy();
 			}
-		}		
+		}
 	};
 </script>
 

src/fields/fieldGoogleAddress.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName",  debounce="500", @focus="geolocate()")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName",  debounce="500", @focus="geolocate()", :id="getFieldID(schema)")
 </template>
 
 <script>
@@ -59,7 +59,7 @@
 				if (place) {
 
 					this.value = place.formatted_address;
-					
+
 					let data  = {};
 					if (place.address_components !== undefined) {
 						for (let i = 0; i < place.address_components.length; i++) {
@@ -70,12 +70,12 @@
 						}
 
 					}
-					
+
 					// Call event in schema
 					if (isFunction(this.schema.onPlaceChanged))
 						this.schema.onPlaceChanged(this.value, data, place, this.model, this.schema);
 				}
-			},	
+			},
 
 			/**
 			 * Get the user location.

src/fields/fieldInput.vue

@@ -1,7 +1,8 @@
 <template lang="jade">
 .wrapper
 	input.form-control(
-		:type="schema.inputType", 
+		:id="getFieldID(schema)",
+		:type="schema.inputType",
 		:value="value",
 		@input="value = $event.target.value",
 		number="schema.inputType == 'number'"
@@ -62,12 +63,12 @@
 						return new Date(value).getTime();
 					}
 				}
-				
+
 				return value;
 			}
 		}
 	};
-	
+
 </script>
 
 <style lang="sass">

src/fields/fieldLabel.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	span {{ value }}
+	span(:id="getFieldID(schema)") {{ value }}
 </template>
 
 <script>

src/fields/fieldMasked.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>
@@ -22,7 +22,7 @@
 		beforeDestroy() {
 			if ($.fn.mask)
 				$(this.$el).unmask();
-		}	
+		}
 	};
 </script>
 

src/fields/fieldSelect.vue

@@ -1,13 +1,13 @@
 <template lang="jade">
-	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName")
+	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
 		option(:disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>
 
 <script>
 	import {isObject} from "lodash";
 	import abstractField from "./abstractField";
-	
+
 	export default {
 		mixins: [ abstractField ],
 
@@ -22,7 +22,7 @@
 					return values.apply(this, [this.model, this.schema]);
 				} else
 					return values;
-			}      
+			}
 		},
 
 		methods: {

src/fields/fieldSpectrum.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
+	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>
@@ -15,7 +15,7 @@
 			};
 		},
 
-		watch: { 
+		watch: {
 			model() {
 				if ($.fn.spectrum) {
 					this.picker.spectrum("set", this.value);

src/fields/fieldSwitch.vue

@@ -1,18 +1,18 @@
 <template lang="jade">
 	label
-		input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
-		span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'")
+		input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
+		span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'", :for="getFieldID(schema)")
 		span.handle
 </template>
 
 <script>
 	import abstractField from "./abstractField";
-	
+
 	export default {
 		mixins: [ abstractField ],
 
 		methods: {
-			
+
 			formatValueToField(value) {
 				if (value != null && this.schema.valueOn)
 					return value == this.schema.valueOn;
@@ -29,7 +29,7 @@
 				}
 
 				return value;
-			}		
+			}
 		}
 	};
 </script>
@@ -39,7 +39,7 @@
 	$field-switch-width: 120px;
 	$field-switch-height: 30px;
 
-	.vue-form-generator .field-switch { 
+	.vue-form-generator .field-switch {
 
 		.field-wrap label {
 			position: relative;
@@ -132,11 +132,11 @@
 			left: calc(100% - ($field-switch-height - 1px));
 			box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
 		}
-		 
+
 		/* Transition
 		========================== */
 		.label, .handle {
 			transition: all 0.3s ease;
 		}
 	}
-</style>
+</style>

src/fields/fieldTextArea.vue

@@ -1,5 +1,14 @@
 <template lang="jade">
-	textarea.form-control(v-model="value", :disabled="disabled", :maxlength="schema.max", :minlength="schema.min", :placeholder="schema.placeholder", :readonly="schema.readonly", :rows="schema.rows || 2", :name="schema.inputName")
+	textarea.form-control(
+		v-model="value",
+		:id="getFieldID(schema)",
+		:disabled="disabled",
+		:maxlength="schema.max",
+		:minlength="schema.min",
+		:placeholder="schema.placeholder",
+		:readonly="schema.readonly",
+		:rows="schema.rows || 2",
+		:name="schema.inputName")
 </template>
 
 <script>
@@ -8,7 +17,7 @@
 	export default {
 		mixins: [ abstractField ]
 	};
-	
+
 </script>