radio updates

ionic/components/button/button.ts

@@ -34,7 +34,7 @@ export class TapDisabled {}
 
 
 @Directive({
-  selector: 'button,[button],[tappable],ion-checkbox',
+  selector: 'button,[button],[tappable],ion-checkbox,ion-radio',
   host: {
     '(^touchstart)': 'touchStart($event)',
     '(^touchend)': 'touchEnd($event)',

ionic/components/checkbox/checkbox.ts

@@ -18,7 +18,8 @@ import {TapClick} from '../button/button';
   properties: [
     'value',
     'checked',
-    'disabled'
+    'disabled',
+    'id'
   ],
   host: {
     'class': 'item',
@@ -28,8 +29,7 @@ import {TapClick} from '../button/button';
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-labelledby]': 'labelId',
     '(^click)': 'click($event)'
-  },
-  exportAs: 'checkbox'
+  }
 })
 @IonicView({
   template:
@@ -42,9 +42,9 @@ import {TapClick} from '../button/button';
 })
 export class Checkbox extends IonInputItem {
   constructor(
-    @Optional() cd: NgControl,
     elementRef: ElementRef,
     config: IonicConfig,
+    @Optional() cd: NgControl,
     tapClick: TapClick
   ) {
     super(elementRef, config);
@@ -77,8 +77,8 @@ export class Checkbox extends IonInputItem {
     }
   }
 
-  writeValue(modelValue) {
-    this.checked = modelValue;
+  writeValue(value) {
+    this.checked = value;
   }
 
   // Used by the view to update the model (Control)

ionic/components/radio/radio.ts

@@ -1,63 +1,62 @@
-import {ElementRef, Ancestor, NgControl, Renderer} from 'angular2/angular2';
+import {ElementRef, Ancestor, Optional, NgControl} from 'angular2/angular2';
 
 import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations';
 import {IonicConfig} from '../../config/config';
 import {Ion} from '../ion';
 import {IonInputItem} from '../form/form';
+import {TapClick} from '../button/button';
 
-let groupName = -1;
 
 @IonicDirective({
   selector: 'ion-radio-group',
   host: {
-    'class': 'list'
+    'class': 'list',
+    'role': 'radiogroup',
+    '[attr.aria-activedescendant]': 'activeId'
   }
 })
 export class RadioGroup extends Ion {
-
-  _name: number = ++groupName;
-  buttons: Array<RadioButton> = [];
+  radios: Array<RadioButton> = [];
 
   constructor(
-    cd: NgControl,
-    renderer: Renderer,
     elementRef: ElementRef,
-    ionicConfig: IonicConfig
+    config: IonicConfig,
+    @Optional() cd: NgControl
   ) {
-    super(elementRef, ionicConfig);
+    super(elementRef, config);
+    this.id = ++radioGroupIds;
+    this.radioIds = -1;
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
-    this.renderer = renderer;
-    this.elementRef = elementRef;
 
-    cd.valueAccessor = this;
-
-    this.value = "";
+    if (cd) cd.valueAccessor = this;
   }
 
-  registerButton(radioButton) {
-    this.buttons.push(radioButton);
-    let inputEl = radioButton.input.elementRef.nativeElement;
-    if (!inputEl.hasAttribute('name')) {
-      radioButton.input.name = this._name;
+  registerRadio(radio) {
+    radio.id = radio.id || ('radio-' + this.id + '-' + (++this.radioIds));
+    this.radios.push(radio);
+
+    if (radio.checked) {
+      this.value = radio.value;
+      this.activeId = radio.id;
     }
   }
 
-  //from clicking the label or switching inputs with keyboard
-  //view -> model (Control)
-  update(input) {
-    for (let button of this.buttons) {
-      button.input.checked = false;
-    }
-    input.checked = true;
-    this.onChange(input.value);
+  update(checkedRadio) {
+    this.value = checkedRadio.value;
+    this.activeId = checkedRadio.id;
+
+    for (let radio of this.radios) {
+      radio.checked = (radio === checkedRadio);
+    }
+
+    this.onChange(this.value);
   }
 
-  // Called by the model (Control) to update the view
   writeValue(value) {
     this.value = value;
-    for (let button of this.buttons) {
-      button.input.checked = button.input.value == value;
+    for (let radio of this.radios) {
+      radio.checked = (radio.value == value);
     }
   }
 
@@ -68,16 +67,28 @@ export class RadioGroup extends Ion {
   registerOnTouched(fn) { this.onTouched = fn; }
 }
 
+
 @IonicComponent({
   selector: 'ion-radio',
+  properties: [
+    'value',
+    'checked',
+    'disabled',
+    'id'
+  ],
   host: {
     'class': 'item',
-    '[attr.aria-checked]': 'input.checked',
+    'role': 'radio',
+    '[attr.tab-index]': 'tabIndex',
+    '[attr.aria-checked]': 'checked',
+    '[attr.aria-disabled]': 'disabled',
+    '[attr.aria-labelledby]': 'labelId',
+    '(^click)': 'click($event)'
   }
 })
 @IonicView({
   template:
-  '<div class="item-content">' +
+  '<div class="item-content" id="{{labelId}}">' +
     '<ng-content></ng-content>' +
   '</div>' +
   '<div class="item-media media-radio">' +
@@ -86,22 +97,36 @@ export class RadioGroup extends Ion {
 })
 export class RadioButton extends IonInputItem {
   constructor(
-    @Ancestor() group: RadioGroup,
+    @Ancestor() @Optional() group: RadioGroup,
     elementRef: ElementRef,
-    config: IonicConfig
+    config: IonicConfig,
+    tapClick: TapClick
   ) {
     super(elementRef, config);
+    this.tapClick = tapClick;
     this.group = group;
+    this.tabIndex = 0;
   }
 
-  registerInput(input) {
-    this.input = input;
-    this.group.registerButton(this);
+  onInit() {
+    super.onInit();
+    this.group.registerRadio(this);
+    this.labelId = 'label-' + this.id;
   }
 
-  //from clicking the label or switching inputs with keyboard
-  //view -> model (Control)
-  toggle() {
-    this.group.update(this.input);
+  click(ev) {
+    if (this.tapClick.allowClick(ev)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      this.check();
     }
+  }
+
+  check() {
+    this.checked = !this.checked;
+    this.group.update(this);
+  }
+
 }
+
+let radioGroupIds = -1;

ionic/components/radio/test/basic/main.html

@@ -12,19 +12,16 @@
         Fruits
       </div>
 
-      <ion-radio>
-        <label>Apple</label>
-        <input value="apple" checked="true" type="radio">
+      <ion-radio value="apple" checked="true">
+        Apple
       </ion-radio>
 
-      <ion-radio id="e2eBanana">
-        <label>Banana</label>
-        <input value="banana" type="radio">
+      <ion-radio value="banana" id="e2eBanana">
+        Banana
       </ion-radio>
 
-      <ion-radio>
-        <label>Cherry</label>
-        <input value="cherry" type="radio">
+      <ion-radio value="cherry" id="my-id">
+        Cherry
       </ion-radio>
 
     </ion-radio-group>