icon/button updates

ionic/components/icon/icon.ts

@@ -59,23 +59,34 @@ Custom Font Icon
   ],
   host: {
     '[attr.aria-label]': 'label',
-    '[attr.role]': 'role',
+    '[attr.aria-hidden]': 'ariaHidden',
-    '[attr.aria-hidden]': 'hidden'
+    'role': 'img'
   }
 })
 export class IconDirective {
   constructor(elementRef: ElementRef, @Optional() @Parent() parentButton: Button) {
     var ele = this.ele = elementRef.nativeElement;
 
-    this.previousText = (ele.previousSibling && ele.previousSibling.textContent || '').trim();
+    this.iconLeft = this.iconRight = this.iconOnly = false;
-    this.nextText = (ele.nextSibling && ele.nextSibling.textContent || '').trim();
+    this.ariaHidden = true;
 
     if (parentButton) {
+      // this icon is within a button
       this.withinButton = true;
-      this.iconLeft = !!this.nextText;
-      this.iconRight = !!this.previousText;
-      this.iconOnly = !this.iconLeft && !this.iconRight;
 
+      // check if there is a sibling element (that's not aria hidden)
+      let hasNextSiblingElement = ele.nextElementSibling && ele.nextElementSibling.getAttribute('aria-hidden') !== 'true';
+
+      if (!hasNextSiblingElement) {
+        // this icon is within a button, and doesn't have a sibling element
+        // check for text nodes to the right and left of this icon element
+        this.iconLeft = (ele.nextSibling && ele.nextSibling.textContent || '').trim() !== '';
+        this.iconRight = (ele.previousSibling && ele.previousSibling.textContent || '').trim() !== '';
+        this.iconOnly = !this.iconLeft && !this.iconRight;
+      }
+
+      // tell the button there's a child icon
+      // the button will set the correct css classes on itself
       parentButton.registerIcon(this);
     }
   }
@@ -83,31 +94,19 @@ export class IconDirective {
   onInit() {
     if (!this.name) return;
 
-    // add the css class
+    // add the css class to show the icon font
     this.ele.classList.add(this.name);
 
+    // hide the icon when it's within a button
+    // and the button isn't an icon only button
+    this.ariaHidden = (this.withinButton && !this.iconOnly);
 
-    if (this.withinButton && !this.iconOnly) {
+    if (!this.ariaHidden) {
-      // icon's within a button that has text
+      // the icon is either not within a button
-      this.hidden = true;
+      // or the icon is within a button, and its an icon only button
-
-    } else {
-      // either not within a button, or it's not a icon only button
-      this.role = 'img';
-      this.hidden = false;
       this.label = this.name.replace('ion-', '').replace('ios-', '').replace('md-', '').replace('-', '');
     }
 
-
-    if (this.iconOnly) {
-      // this is an icon within a button that has not text label
-
-    } else {
-
-    }
-
-
-
   }
 
   onDestroy() {

ionic/components/material/ripple.ts

@@ -15,6 +15,7 @@ export class MaterialRippleEffect {
 
     var rippleContainer = document.createElement('span');
     rippleContainer.classList.add('md-ripple-container');
+    rippleContainer.setAttribute('aria-hidden', 'true');
     this.rippleElement = document.createElement('span');
     this.rippleElement.classList.add('md-ripple');
     rippleContainer.appendChild(this.rippleElement);

ionic/components/tabs/tabs.ts

@@ -14,19 +14,18 @@ import {IonicComponent, IonicView} from '../../config/annotations';
   }
 })
 @IonicView({
-  template: `
+  template: '' +
-    <nav class="tab-bar-container">
+    '<nav class="tab-bar-container">' +
-      <div class="tab-bar" role="tablist">
+      '<div class="tab-bar" role="tablist">' +
-        <button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
+        '<button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
-          <icon [name]="t.tabIcon" class="tab-button-icon"></icon>
+          '<icon [name]="t.tabIcon" class="tab-button-icon"></icon>' +
-          <span class="tab-button-text">{{t.tabTitle}}</span>
+          '<span class="tab-button-text">{{t.tabTitle}}</span>' +
-        </button>
+        '</button>' +
-      </div>
+      '</div>' +
-    </nav>
+    '</nav>' +
-    <section class="content-container">
+    '<section class="content-container">' +
-      <content></content>
+      '<content></content>' +
-    </section>
+    '</section>',
-  `,
   directives: [forwardRef(() => TabButton)]
 })
 export class Tabs extends ViewController {
@@ -122,8 +121,8 @@ export class Tabs extends ViewController {
     '[class.has-title]': 'hasTitle',
     '[class.has-icon]': 'hasIcon',
     '[class.has-title-only]': 'hasTitleOnly',
-    '[class.has-icon-only]': 'hasIconOnly',
+    '[class.icon-only]': 'hasIconOnly',
-    '(^click)': 'onClick($event)'
+    '(^click)': 'onClick($event)',
   }
 })
 class TabButton {

ionic/components/toolbar/toolbar-buttons.scss

@@ -9,7 +9,7 @@
   button,
   [button] {
     margin: 0 4px;
-    padding: 0 4px;
+    padding: 0 5px;
 
     min-width: 2.8rem;
     min-height: 2.8rem;