fix(aria): aria label/id updates

ionic/components/checkbox/checkbox.ts

@@ -33,6 +33,7 @@ import {Form} from '../../util/form';
   host: {
     'role': 'checkbox',
     'tappable': 'true',
+    '[attr.id]': 'id',
     '[attr.tab-index]': 'tabIndex',
     '[attr.aria-checked]': 'checked',
     '[attr.aria-disabled]': 'disabled',
@@ -53,7 +54,7 @@ import {Form} from '../../util/form';
 export class Checkbox {
 
   constructor(
-    form: Form,
+    private form: Form,
     @Optional() ngControl: NgControl,
     elementRef: ElementRef
   ) {
@@ -72,7 +73,11 @@ export class Checkbox {
    * @private
    */
   ngOnInit() {
-    this.labelId = 'label-' + this.inputId;
+    if (!this.id) {
+      this.id = 'chk-' + this.form.nextId();
+    }
+
+    this.labelId = 'lbl-' + this.id;
   }
 
   /**

ionic/components/radio/radio.ts

@@ -4,6 +4,7 @@ import {NgControl} from 'angular2/common';
 import {Config} from '../../config/config';
 import {Ion} from '../ion';
 import {ListHeader} from '../list/list';
+import {Form} from '../../util/form';
 
 
 /**
@@ -200,7 +201,8 @@ export class RadioButton extends Ion {
   constructor(
     @Host() @Optional() group: RadioGroup,
     elementRef: ElementRef,
-    config: Config
+    config: Config,
+    private form: Form
   ) {
     super(elementRef, config);
 
@@ -213,16 +215,24 @@ export class RadioButton extends Ion {
    */
   ngOnInit() {
     super.ngOnInit();
-    this.group.registerRadio(this);
-    this.labelId = 'label-' + this.id;
+    if (!this.id) {
+      this.id = 'rb-' + this.form.nextId();
+    }
+    this.labelId = 'lbl-' + this.id;
+
+    if (this.group) {
+      this.group.registerRadio(this);
+    } else {
+      console.error('<ion-radio> must be within a <ion-list radio-group>');
+    }
   }
 
   /**
    * @private
    */
-  click(event) {
-    event.preventDefault();
-    event.stopPropagation();
+  click(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
     this.check();
   }
 

ionic/components/text-input/label.ts

@@ -3,6 +3,9 @@ import {Directive, Optional, ElementRef, Renderer} from 'angular2/core';
 import {Config} from '../../config/config';
 import {TextInput} from './text-input';
 import {pointerCoord, hasPointerMoved} from '../../util/dom';
+import {Form} from '../../util/form';
+
+
 /**
  * @name Label
  * @description
@@ -38,15 +41,19 @@ export class Label {
   constructor(
     config: Config,
     @Optional() container: TextInput,
+    private form: Form,
     private elementRef: ElementRef,
     private renderer: Renderer
   ) {
     this.scrollAssist = config.get('scrollAssist');
-    if (!this.id) {
-      this.id = 'lbl-' + (++labelIds);
-    }
     this.container = container;
-    container && container.registerLabel(this);
+  }
+
+  ngOnInit() {
+    if (!this.id) {
+      this.id = 'lbl-' + this.form.nextId();
+    }
+    this.container && this.container.registerLabel(this);
   }
 
   /**
@@ -87,5 +94,3 @@ export class Label {
   }
 
 }
-
-let labelIds = -1;

ionic/components/text-input/test/input-focus/main.html

@@ -65,12 +65,20 @@
       <textarea placeholder="Placeholder Text"></textarea>
     </ion-input>
 
+    <ion-toggle>
+      Toggle
+    </ion-toggle>
+
     <ion-input>
       <ion-label>More Info:</ion-label>
       <input placeholder="Placeholder Text" type="text">
       <icon flag item-right></icon>
     </ion-input>
 
+    <ion-checkbox>
+      Checkbox
+    </ion-checkbox>
+
     <ion-input>
       <ion-label>Score:</ion-label>
       <input value="10" type="number">
@@ -100,95 +108,21 @@
       Item
     </ion-item>
 
+  </ion-list>
 
-    <!--
-    <ion-item>
-      Item
-    </ion-item>
+  <ion-list radio-group>
 
-    <ion-item>
-      Item
-    </ion-item>
+    <ion-list-header>
+      Radios
+    </ion-list-header>
 
-    <ion-item>
-      Item
-    </ion-item>
+    <ion-radio>
+      Radio 1
+    </ion-radio>
 
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item>
-
-    <ion-item>
-      Item
-    </ion-item> -->
+    <ion-radio>
+      Radio 2
+    </ion-radio>
 
   </ion-list>
 

ionic/components/text-input/text-input.ts

@@ -133,7 +133,7 @@ export class TextInput {
   /**
    * @private
    */
-  ngOnInit() {
+  ngAfterViewInit() {
     if (this.input && this.label) {
       // if there is an input and an label
       // then give the label an ID

ionic/components/toggle/toggle.ts

@@ -82,6 +82,7 @@ class MediaToggle {
   host: {
     'role': 'checkbox',
     'tappable': 'true',
+    '[attr.id]': 'id',
     '[attr.tab-index]': 'tabIndex',
     '[attr.aria-checked]': 'checked',
     '[attr.aria-disabled]': 'disabled',
@@ -169,7 +170,11 @@ export class Toggle {
    * @private
    */
   ngOnInit() {
-    this.labelId = 'label-' + this.inputId;
+    if (!this.id) {
+      this.id = 'tgl-' + this.form.nextId();
+    }
+
+    this.labelId = 'lbl-' + this.id;
   }
 
   /**
@@ -260,4 +265,11 @@ export class Toggle {
   isDisabled(ev) {
     return (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) || (this.mode == 'ios' && ev.target.tagName == 'ION-TOGGLE');
   }
+
+  /**
+   * @private
+   */
+  initFocus() {
+
+  }
 }