fix(textfloat): improve ARIA pairing links between label and input.

Closes #483.

src/components/textField/textField.js

@@ -7,7 +7,7 @@
 angular.module('material.components.textField', ['material.core', 'material.services.theming'])
        .directive('mdInputGroup', [ mdInputGroupDirective ])
        .directive('mdInput', ['$mdUtil', mdInputDirective ])
-       .directive('mdTextFloat', [ '$mdTheming', mdTextFloatDirective ]);
+       .directive('mdTextFloat', [ '$mdTheming', '$mdUtil', mdTextFloatDirective ]);
 
 
 
@@ -21,9 +21,10 @@ angular.module('material.components.textField', ['material.core', 'material.serv
  * @description
  * Use the `<md-text-float>` directive to quickly construct `Floating Label` text fields
  *
+ * @param {string} fid Attribute used for accessibility link pairing between the Label and Input elements
+ * @param {string=} type Optional value to define the type of input field. Defaults to string.
  * @param {string} label Attribute to specify the input text field hint.
  * @param {string=} ng-model Optional value to assign as existing input text string
- * @param {string=} type Optional value to define the type of input field. Defaults to string.
  *
  * @usage
  * <hljs lang="html">
@@ -36,7 +37,7 @@ angular.module('material.components.textField', ['material.core', 'material.serv
  * <md-text-float label="eMail"    ng-model="user.email" type="email" ></md-text-float>
  * </hljs>
  */
-function mdTextFloatDirective($mdTheming) {
+function mdTextFloatDirective($mdTheming, $mdUtil) {
   return {
     restrict: 'E',
     replace: true,
@@ -45,7 +46,12 @@ function mdTextFloatDirective($mdTheming) {
       label : '@?',
       value : '=ngModel'
     },
-    compile : function() {
+    compile : function(element, attr) {
+
+      if ( angular.isUndefined(attr.fid) ) {
+        attr.fid = $mdUtil.nextUid();
+      }
+
       return {
         pre : function(scope, element, attrs) {
           // transpose `disabled` flag
@@ -54,13 +60,10 @@ function mdTextFloatDirective($mdTheming) {
             scope.isDisabled = true;
           }
 
-          // transpose the `label`, type, and fid properties
-          scope.fid = scope.fid || scope.label;
-
           scope.inputType = attrs.type || "text";
           element.removeAttr('type');
 
-          // transpose optional `type` and `class` settings
+          // transpose optional `class` settings
           element.attr('class', attrs.class );
 
         },

src/components/textField/textField.spec.js

@@ -173,7 +173,6 @@ describe('Text Field directives', function() {
       input.triggerHandler('input');
       expect(el.hasClass('md-input-has-value')).toBe(true);
     });
-
     it('should set input class for ngModel changes', function() {
       var expressions = {label:"Password", model:"user.password", type:"password"},
           el = setupTextFloat( expressions, model),
@@ -188,6 +187,32 @@ describe('Text Field directives', function() {
       expect(el.hasClass('md-input-has-value')).toBe(true);
     });
 
+    it('should pair input and label for accessibility.', function() {
+      var markup ='<md-text-float ' +
+                  '  fid="093" ' +
+                  '  label="{{labels.firstName}}" ' +
+                  '  ng-model="user.firstName" >' +
+                  '</md-text-float>';
+      var el = buildElement( markup, model);
+      var input = el.find('input');
+      var label = el.find('label')
+
+      expect( label.attr('for') ).toBe( "093" );
+      expect( input.attr('id') ).toBe( label.attr('for') );
+    });
+    it('should auto-pair input and label for accessibility.', function() {
+      var markup ='<md-text-float ' +
+                  '  label="{{labels.firstName}}" ' +
+                  '  ng-model="user.firstName" >' +
+                  '</md-text-float>';
+      var el = buildElement( markup, model);
+      var input = el.find('input');
+      var label = el.find('label')
+
+      expect( label.attr('for') == "" ).toBe( false );
+      expect( input.attr('id') ).toBe( label.attr('for') );
+    });
+
   });
 
   // ****************************************************************