FormLabelMixin: pass classes and label-specific attributes to the <label> node (#319)

* set classes and formID attribute on the label node in formLabelMixin

Author: smhigley

src/mixins/createFormLabelMixin.ts

@@ -57,6 +57,11 @@ export interface FormLabelMixinProperties {
 	 */
 	describedBy?: string;
 
+	/**
+	 * ID of a form element associated with the form field
+	 */
+	formId?: string;
+
 	/**
 	 * Indicates the value entered in the form field is invalid
 	 */
@@ -118,7 +123,7 @@ const labelDefaults = {
 /**
  * Allowed attributes for a11y
  */
-const allowedAttributes = ['checked', 'describedBy', 'disabled', 'invalid', 'maxLength', 'minLength', 'multiple', 'name', 'placeholder', 'readOnly', 'required', 'type', 'value'];
+const allowedFormFieldAttributes = ['checked', 'describedBy', 'disabled', 'invalid', 'maxLength', 'minLength', 'multiple', 'name', 'placeholder', 'readOnly', 'required', 'type', 'value'];
 
 function getFormFieldA11yAttributes(instance: FormLabel) {
 	const { properties, type } = instance;
@@ -130,7 +135,7 @@ function getFormFieldA11yAttributes(instance: FormLabel) {
 
 	const nodeAttributes: any = {};
 
-	for (const key of allowedAttributes) {
+	for (const key of allowedFormFieldAttributes) {
 
 		if (attributeKeys.indexOf(key) === -1) {
 			continue;
@@ -168,8 +173,14 @@ const createFormLabelMixin = compose<FormLabelMixin, {}>({})
 .aspect({
 	after: {
 		render(this: FormLabel, result: DNode): DNode {
+			const labelNodeAttributes: any = {};
 			if (isHNode(result)) {
 				assign(result.properties, getFormFieldA11yAttributes(this));
+
+				// move classes to label node
+				const { classes } = result.properties;
+				const { formId } = this.properties;
+				assign(labelNodeAttributes, { classes, 'form': formId });
 			}
 
 			if (this.properties.label) {
@@ -194,7 +205,7 @@ const createFormLabelMixin = compose<FormLabelMixin, {}>({})
 					children.reverse();
 				}
 
-				result = v('label', children);
+				result = v('label', labelNodeAttributes, children);
 			}
 
 			return result;

tests/unit/mixins/createFormLabelMixin.ts

@@ -1,7 +1,7 @@
 import * as registerSuite from 'intern!object';
 import * as assert from 'intern/chai!assert';
 import { VNode } from '@dojo/interfaces/vdom';
-import { w } from './../../../src/d';
+import { v, w } from './../../../src/d';
 import createWidgetBase from '../../../src/createWidgetBase';
 import createFormLabelMixin from '../../../src/mixins/createFormLabelMixin';
 
@@ -74,6 +74,28 @@ registerSuite({
 			assert.strictEqual(vnode.vnodeSelector, 'div');
 			assert.isUndefined(vnode.properties!['value']);
 			assert.isUndefined(vnode.properties!['maxlength']);
+		},
+		'label properties'() {
+			const inputWithClasses = createWidgetBase.override({
+				render(this: any) {
+					return v('input', { classes: this.properties.classes });
+				}
+			});
+			const formField = inputWithClasses.mixin(createFormLabelMixin)({
+				properties: {
+					label: 'foo',
+					value: 'bar',
+					maxLength: 100,
+					formId: 'baz',
+					classes: { 'qux': true }
+				}
+			});
+			let vnode = <VNode> formField.__render__();
+
+			assert.strictEqual(vnode.children![0].properties!['value'], 'bar');
+			assert.strictEqual(vnode.children![0].properties!['maxlength'], '100');
+			assert.strictEqual(vnode.properties!['form'], 'baz');
+			assert.isTrue(vnode.properties!.classes!['qux'], 'Classes should be set on the label node');
 		}
 	},
 	'type'() {