Skip to content

Commit 5552079

Browse files
icebobicebob
authored
Merge pull request #201 from phemisystems/better-accessibility-labels
Better accessibility labels - to master
2 parents 5105f39 + d618958 commit 5552079

14 files changed

+307
-192
lines changed

‎src/fields/abstractField.js

+31-4
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default {
5353
if (isFunction(this.schema.set)) {
5454
this.schema.set(this.model, newValue);
5555
changed = true;
56-
56+
5757
} else if (this.schema.model) {
5858
this.setModelValueByPath(this.schema.model, newValue);
5959
changed = true;
@@ -68,7 +68,7 @@ export default {
6868

6969
if (this.$parent.options && this.$parent.options.validateAfterChanged === true){
7070
this.validate();
71-
}
71+
}
7272
}
7373
}
7474
}
@@ -133,7 +133,7 @@ export default {
133133
setModelValueByPath(path, value) {
134134
// convert array indexes to properties
135135
let s = path.replace(/\[(\w+)\]/g, ".$1");
136-
136+
137137
// strip a leading dot
138138
s = s.replace(/^\./, "");
139139

@@ -157,9 +157,36 @@ export default {
157157
this.$root.$set(o, k, value);
158158
return;
159159
}
160-
160+
161161
++i;
162162
}
163+
},
164+
165+
getFieldID(schema) {
166+
// Try to get a reasonable default id from the schema,
167+
// then slugify it.
168+
if (typeof schema.id !== "undefined") {
169+
// If an ID's been explicitly set, use it unchanged
170+
return schema.id;
171+
} else {
172+
// Return the slugified version of either:
173+
return (schema.inputName || schema.label || schema.model)
174+
// NB: This is a very simple, conservative, slugify function,
175+
// avoiding extra dependencies.
176+
.toString()
177+
.trim()
178+
.toLowerCase()
179+
// Spaces & underscores to dashes
180+
.replace(/ |_/g, "-")
181+
// Multiple dashes to one
182+
.replace(/-{2,}/g, "-")
183+
// Remove leading & trailing dashes
184+
.replace(/^-+|-+$/g, "")
185+
// Remove anything that isn't a (English/ASCII) letter, number or dash.
186+
.replace(/([^a-zA-Z0-9-]+)/g, "")
187+
;
188+
}
163189
}
190+
164191
}
165192
};

‎src/fields/core/fieldInput.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template lang="pug">
22
.wrapper
33
input.form-control(
4-
:type="schema.inputType",
4+
:id="getFieldID(schema)",
5+
:type="schema.inputType",
56
:value="value",
67
@input="value = $event.target.value",
78
@change="onChange",
@@ -74,12 +75,12 @@
7475
return Number(value);
7576
}
7677
}
77-
78+
7879
return value;
7980
}
8081
}
8182
};
82-
83+
8384
</script>
8485

8586
<style lang="sass">

‎src/fields/core/fieldLabel.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
span {{ value }}
2+
span(:id="getFieldID(schema)") {{ value }}
33
</template>
44

55
<script>

‎src/fields/core/fieldSelect.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName")
2+
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
33
option(:disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
44
option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
55
</template>

‎src/fields/core/fieldTextArea.vue

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
<template lang="pug">
2-
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")
2+
textarea.form-control(
3+
v-model="value",
4+
:id="getFieldID(schema)",
5+
:disabled="disabled",
6+
:maxlength="schema.max",
7+
:minlength="schema.min",
8+
:placeholder="schema.placeholder",
9+
:readonly="schema.readonly",
10+
:rows="schema.rows || 2",
11+
:name="schema.inputName")
312
</template>
413

514
<script>

‎src/fields/optional/fieldCleave.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
2+
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)")
33
</template>
44

55
<script>

‎src/fields/optional/fieldDateTimePicker.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template lang="pug">
22
.input-group.date
3-
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
3+
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)")
44
span.input-group-addon
55
span.glyphicon.glyphicon-calendar
66
</template>
@@ -19,7 +19,7 @@
1919
methods: {
2020
2121
getDateFormat() {
22-
if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format)
22+
if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format)
2323
return this.schema.dateTimePickerOptions.format;
2424
else
2525
return inputFormat;
@@ -47,7 +47,7 @@
4747
if (window.$ && window.$.fn.datetimepicker){
4848
$(this.$el).data("DateTimePicker").destroy();
4949
}
50-
}
50+
}
5151
};
5252
</script>
5353

‎src/fields/optional/fieldGoogleAddress.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
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()")
2+
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)")
33
</template>
44

55
<script>
@@ -59,7 +59,7 @@
5959
if (place) {
6060
6161
this.value = place.formatted_address;
62-
62+
6363
let data = {};
6464
if (place.address_components !== undefined) {
6565
for (let i = 0; i < place.address_components.length; i++) {
@@ -70,12 +70,12 @@
7070
}
7171
7272
}
73-
73+
7474
// Call event in schema
7575
if (isFunction(this.schema.onPlaceChanged))
7676
this.schema.onPlaceChanged(this.value, data, place, this.model, this.schema);
7777
}
78-
},
78+
},
7979
8080
/**
8181
* Get the user location.

‎src/fields/optional/fieldMasked.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
2+
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)")
33
</template>
44

55
<script>

‎src/fields/optional/fieldSpectrum.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template lang="pug">
2-
input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
2+
input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
33
</template>
44

55
<script>

‎src/fields/optional/fieldSwitch.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template lang="pug">
22
label
3-
input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
4-
span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'")
3+
input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
4+
span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'", :for="getFieldID(schema)")
55
span.handle
66
</template>
77

0 commit comments

Comments
 (0)