From 0e2c41c68c94100783e2da73230baeb9fbf2734d Mon Sep 17 00:00:00 2001 From: Duncan Lock Date: Fri, 13 Jan 2017 20:02:21 -0800 Subject: [PATCH 1/8] Improve labels for better accessibility: * Associate each label with it's control, by making sure that each control has an id, and using the labels `for` attribute to bind to this. * Don't output label elements for button controls --- package.json | 2 +- src/fields/abstractField.js | 23 + src/fields/fieldInput.vue | 7 +- src/fields/fieldTextArea.vue | 13 +- src/formGenerator.vue | 66 +- yarn.lock | 6915 ++++++++++++++++++++++++++++++++++ 6 files changed, 6994 insertions(+), 32 deletions(-) create mode 100644 yarn.lock diff --git a/package.json b/package.json index ada93ad6..eae887f2 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "scripts": { "prebuild": "npm run test", "build": "webpack --progress --config webpack.build.config.js", - "dev": "webpack-dev-server --config webpack.dev.config.js --inline --hot --content-base dev/", + "dev": "webpack-dev-server --config webpack.dev.config.js --inline --hot --content-base dev/ --port 8082", "lint": "eslint --ext=.js,.vue src test/unit/specs", "coverall": "cat ./test/unit/coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js", "coverage": "npm run test && npm run coverall", diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js index ed0457ce..a8c4ea81 100644 --- a/src/fields/abstractField.js +++ b/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, '') + ; + } } } }; diff --git a/src/fields/fieldInput.vue b/src/fields/fieldInput.vue index 44d5644f..d22e456e 100644 --- a/src/fields/fieldInput.vue +++ b/src/fields/fieldInput.vue @@ -1,7 +1,8 @@