Merge pull request #201 from phemisystems/better-accessibility-labels

icebob · web-flow · commit 5552079cde70 · 2017-05-24T08:31:57.000+02:00
Better accessibility labels - to master
diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
@@ -53,7 +53,7 @@ export default {
 				if (isFunction(this.schema.set)) {
 					this.schema.set(this.model, newValue);
 					changed = true;
-					
+
 				} else if (this.schema.model) {
 					this.setModelValueByPath(this.schema.model, newValue);
 					changed = true;
@@ -68,7 +68,7 @@ export default {
 
 					if (this.$parent.options && this.$parent.options.validateAfterChanged === true){
 						this.validate();
-					}					
+					}
 				}
 			}
 		}
@@ -133,7 +133,7 @@ export default {
 		setModelValueByPath(path, value) {
 			// convert array indexes to properties
 			let s = path.replace(/\[(\w+)\]/g, ".$1");
-			
+
 			// strip a leading dot
 			s = s.replace(/^\./, "");
 
@@ -157,9 +157,36 @@ export default {
 					this.$root.$set(o, k, value);
 					return;
 				}
-				
+
 				++i;
 			}
+		},
+
+		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 the slugified version of either:
+				return (schema.inputName || schema.label || schema.model)
+				// NB: This is a very simple, conservative, slugify function,
+				// avoiding extra dependencies.
+				.toString()
+				.trim()
+				.toLowerCase()
+				// Spaces & underscores 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, number or dash.
+				.replace(/([^a-zA-Z0-9-]+)/g, "")
+				;
+			}
 		}
+
 	}
 };
diff --git a/src/fields/core/fieldInput.vue b/src/fields/core/fieldInput.vue
@@ -1,7 +1,8 @@
 <template lang="pug">
 .wrapper
 	input.form-control(
-		:type="schema.inputType", 
+		:id="getFieldID(schema)",
+		:type="schema.inputType",
 		:value="value",
 		@input="value = $event.target.value",
 		@change="onChange",
@@ -74,12 +75,12 @@
 						return Number(value);
 					}
 				}
-				
+
 				return value;
 			}
 		}
 	};
-	
+
 </script>
 
 <style lang="sass">
diff --git a/src/fields/core/fieldLabel.vue b/src/fields/core/fieldLabel.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	span {{ value }}
+	span(:id="getFieldID(schema)") {{ value }}
 </template>
 
 <script>
diff --git a/src/fields/core/fieldSelect.vue b/src/fields/core/fieldSelect.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	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>
diff --git a/src/fields/core/fieldTextArea.vue b/src/fields/core/fieldTextArea.vue
@@ -1,5 +1,14 @@
 <template lang="pug">
-	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>
diff --git a/src/fields/optional/fieldCleave.vue b/src/fields/optional/fieldCleave.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	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>
diff --git a/src/fields/optional/fieldDateTimePicker.vue b/src/fields/optional/fieldDateTimePicker.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 	.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;
@@ -47,7 +47,7 @@
 			if (window.$ && window.$.fn.datetimepicker){
 				$(this.$el).data("DateTimePicker").destroy();
 			}
-		}		
+		}
 	};
 </script>
 
diff --git a/src/fields/optional/fieldGoogleAddress.vue b/src/fields/optional/fieldGoogleAddress.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	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.
diff --git a/src/fields/optional/fieldMasked.vue b/src/fields/optional/fieldMasked.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	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>
diff --git a/src/fields/optional/fieldSpectrum.vue b/src/fields/optional/fieldSpectrum.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	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>
diff --git a/src/fields/optional/fieldSwitch.vue b/src/fields/optional/fieldSwitch.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
 	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>
 
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
diff --git a/test/unit/specs/VueFormGenerator.spec.js b/test/unit/specs/VueFormGenerator.spec.js
diff --git a/test/unit/specs/fields/abstractField.spec.js b/test/unit/specs/fields/abstractField.spec.js

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,8 @@`
`1`	`1`	`<template lang="pug">`
`2`	`2`	`.wrapper`
`3`	`3`	`input.form-control(`
`4`		`- :type="schema.inputType",`
	`4`	`+ :id="getFieldID(schema)",`
	`5`	`+ :type="schema.inputType",`
`5`	`6`	`:value="value",`
`6`	`7`	`@input="value = $event.target.value",`
`7`	`8`	`@change="onChange",`
`@@ -74,12 +75,12 @@`
`74`	`75`	`return Number(value);`
`75`	`76`	`}`
`76`	`77`	`}`
`77`		`-`
	`78`	`+`
`78`	`79`	`return value;`
`79`	`80`	`}`
`80`	`81`	`}`
`81`	`82`	`};`
`82`		`-`
	`83`	`+`
`83`	`84`	`</script>`
`84`	`85`
`85`	`86`	`<style lang="sass">`