feat(forms): remove need for <label>. #4735

ionic-team · Dec 7, 2015 · 6383933 · 6383933
1 parent 21baf97
commit 6383933
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 10 deletions.
diff --git a/js/angular/directive/input.js b/js/angular/directive/input.js
@@ -0,0 +1,70 @@
+/**
+* @ngdoc directive
+* @name ionInput
+* @parent ionic.directive:ionList
+* @module ionic
+* @restrict E
+* Creates a text input group that can easily be focused
+*
+* @usage
+*
+* ```html
+* <ion-list>
+*   <ion-input>
+*     <input type="text" placeholder="First Name">
+*   <ion-input>
+* </ion-list>
+* ```
+*/
+
+var labelIds = -1;
+
+IonicModule
+.directive('ionInput', ['$$rAF', function($$rAF) {
+  return {
+    restrict: 'E',
+    controller: ['$scope', '$element', function($scope, $element) {
+      this.$scope = $scope;
+      this.$element = $element;
+
+      this.input = $element[0].querySelector('input,textarea');
+    }],
+    scope: true,
+    compile: function($element, $attrs) {
+
+      var element = $element[0];
+
+      return function link($scope, $element, $attrs) {
+      }
+    }
+  };
+}]);
+
+/**
+ * Input label adds accessibility to <span class="input-label">.
+ */
+IonicModule
+.directive('inputLabel', ['$$rAF', function($$rAF) {
+  return {
+    restrict: 'C',
+    scope: true,
+    require: '?^ionInput',
+    compile: function($element, $attrs) {
+
+      return function link($scope, $element, $attrs, ionInputCtrl) {
+        var element = $element[0];
+
+        $element.attr('aria-label', $element.text());
+        var id = element.id || '_label-' + ++labelIds;
+
+        if(!element.id) {
+          $element.attr('id', id);
+        }
+
+        if(ionInputCtrl && ionInputCtrl.input) {
+          ionInputCtrl.input.setAttribute('aria-labelledby', id);
+        }
+      }
+    }
+  };
+}]);
diff --git a/js/utils/tap.js b/js/utils/tap.js
@@ -431,6 +431,7 @@ function tapTouchStart(e) {
     var textInput = tapTargetElement(tapContainingElement(e.target));
     if (textInput !== tapActiveEle) {
       // don't preventDefault on an already focused input or else iOS's text caret isn't usable
+      console.log('Would prevent default here');
       e.preventDefault();
     }
   }

diff --git a/test/html/content.html b/test/html/content.html
@@ -36,16 +36,20 @@ <h1 class="title">Title</h1>
           </button>
         </div>
         <div class="list">
-  <label class="item item-input">
-    <input type="text" placeholder="First Name">
-  </label>
-  <label class="item item-input">
-    <input type="text" placeholder="Last Name">
-  </label>
-  <label class="item item-input">
-    <textarea placeholder="Comments"></textarea>
-  </label>
-</div>
+          <ion-input class="item item-input">
+            <input type="text" placeholder="First Name">
+          </ion-input>
+          <ion-input class="item item-input">
+            <input type="text" placeholder="Last Name">
+          </ion-input>
+          <ion-input class="item item-input">
+            <textarea placeholder="Comments"></textarea>
+          </ion-input>
+          <ion-input class="item item-input">
+            <span class="input-label">Username</span>
+            <input type="text">
+          </ion-input>
+        </div>
         <div ng-controller="TestCtrl"></div>
         <button ng-click="add()">Click</button>
         <ul class="list" ng-controller="AppCtrl">