tabs aria

src/components/tabs/tab.js

@@ -9,6 +9,7 @@ import {
 import {NavViewport} from 'ionic2/components/nav-viewport/nav-viewport'
 import {NavPane} from 'ionic2/components/nav-pane/nav-pane'
 import {Tabs} from 'ionic2/components/tabs/tabs'
+import * as util from 'ionic2/util'
 import {IonicComponent} from 'ionic2/config/component'
 
 
@@ -33,12 +34,20 @@ export class Tab extends NavViewport {
   constructor(
     element: NgElement,
     @Ancestor() tabs: Tabs,
-    @PropertySetter('class.hide') setHidden: Function
+    @PropertySetter('class.hide') setHidden: Function,
+    @PropertySetter('attr.role') setRole: Function,
+    @PropertySetter('attr.id') setId: Function,
+    @PropertySetter('attr.aria-labelledby') setLabelby: Function
   ) {
     super(element)
     this.config = Tab.config.invoke(this)
     this.setHidden = setHidden
 
+    this.tabId = util.uid()
+    setId('tab-content-' + this.tabId)
+    setLabelby('tab-item-' + this.tabId)
+    setRole('tabpanel')
+
     this.setSelected(false)
     tabs.addTab(this)
   }

src/components/tabs/tabs.js

@@ -16,18 +16,23 @@ import {IonicComponent} from 'ionic2/config/component'
       <!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
     </header>
 
-    <nav class="tab-bar-container">
+    <nav class="tab-bar-container"
+         role="tablist"
+         [attr.aria-activedescendant]="'tab-content-' + selectedTab.tabId">
       <div class="tab-bar">
-        <a *for="#tab of tabs"
+        <button *for="#tab of tabs"
+          role="tab"
           class="tab-bar-item"
-          [class.tab-active]="tab.isSelected"
+          [attr.id]="'tab-item-' + tab.tabId"
+          [attr.aria-controls]="'tab-content-' + tab.tabId"
+          [attr.aria-selected]="tab.isSelected"
           (^click)="onClickTabItem($event, tab)">
             <icon class="tab-bar-item-icon ion-home"
               [hidden]="tabBarIcons=='none'"
               [class.tab-bar-icon-bottom]="tabBarIcons=='bottom'"
               [class.tab-bar-icon-top]="tabBarIcons=='top'"></icon>
             <span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
-        </a>
+        </button>
       </div>
     </nav>
 

src/components/tabs/tabs.scss

@@ -44,6 +44,7 @@ $tab-bar-item-max-width:           160px !default;
   @include flex-direction(column);
   @include flex(1);
   @include flex-align-self(center);
+  @include flex-align-items(center);
 
   padding: $tab-bar-item-padding;
   min-width: $tab-bar-item-min-width;
@@ -52,6 +53,10 @@ $tab-bar-item-max-width:           160px !default;
   text-align: center;
   cursor: pointer;
   @include user-select(none);
+  outline: 0;
+
+  border: 0;
+  background: none;
 }
 
 .tab-bar-icon-bottom .tab-bar-item {
@@ -100,6 +105,6 @@ $tab-bar-item-max-width:           160px !default;
   opacity: 0.6;
 }
 
-.tab-bar-item.tab-active {
+.tab-bar-item[aria-selected="true"] {
   color: red;
 }

src/util/util.js

@@ -41,6 +41,11 @@ export function pascalCaseToDashCase(str = '') {
   })
 }
 
+let _uid = 0
+export function uid() {
+  return _uid++
+}
+
 export class Log {
   static log(...args) {
     console.log.apply(console, args)