fix(alert): update radio/checkbox items to buttons elements

Author: adamdbradley

ionic/components/alert/alert.ios.scss

@@ -142,7 +142,6 @@ $alert-ios-checkbox-icon-checkmark-color:       $background-ios-color !default;
 .alert-tappable {
   display: flex;
   min-height: $alert-ios-button-min-height;
-  cursor: pointer;
 }
 
 

ionic/components/alert/alert.md.scss

@@ -127,7 +127,6 @@ $alert-md-button-text-align:                  right !default;
   overflow: hidden;
   display: flex;
   min-height: 44px;
-  cursor: pointer;
 }
 
 

ionic/components/alert/alert.scss

@@ -78,3 +78,14 @@ ion-alert {
   line-height: $alert-button-line-height;
   font-size: $alert-button-font-size;
 }
+
+.alert-tappable {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  font-size: inherit;
+  line-height: initial;
+  text-align: left;
+  background: transparent;
+  -webkit-appearance: none;
+}

ionic/components/alert/alert.ts

@@ -219,23 +219,23 @@ export class Alert extends ViewController {
 
         '<template ngSwitchWhen="radio">' +
           '<div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">' +
-            '<div *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" tappable role="radio">' +
+            '<button *ngFor="#i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">' +
               '<div class="alert-radio-icon"></div>' +
               '<div class="alert-radio-label">' +
                 '{{i.label}}' +
               '</div>' +
-            '</div>' +
+            '</button>' +
           '</div>' +
         '</template>' +
 
         '<template ngSwitchWhen="checkbox">' +
           '<div class="alert-checkbox-group">' +
-            '<div *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" tappable role="checkbox">' +
+            '<button *ngFor="#i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" class="alert-tappable alert-checkbox" role="checkbox">' +
               '<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
               '<div class="alert-checkbox-label">' +
                 '{{i.label}}' +
               '</div>' +
-            '</div>' +
+            '</button>' +
           '</div>' +
         '</template>' +
 

ionic/components/alert/alert.wp.scss

@@ -143,7 +143,6 @@ ion-alert {
   overflow: hidden;
   display: flex;
   min-height: 44px;
-  cursor: pointer;
 }