From 3e9e077cd53ef54e108bcdcb6da4a65fac453883 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 21 Apr 2015 22:42:59 -0500
Subject: [PATCH] tabs aria

---
 src/components/tabs/tab.js    | 11 ++++++++++-
 src/components/tabs/tabs.js   | 13 +++++++++----
 src/components/tabs/tabs.scss |  7 ++++++-
 src/util/util.js              |  5 +++++
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js
index 574cb57cfb..af97e7bdf9 100644
--- a/src/components/tabs/tab.js
+++ b/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)
   }
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 7417e6cb59..4bde8a4452 100644
--- a/src/components/tabs/tabs.js
+++ b/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>
 
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index e88039dcc2..2c8d92d8c2 100644
--- a/src/components/tabs/tabs.scss
+++ b/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;
 }
diff --git a/src/util/util.js b/src/util/util.js
index 3ad60d8688..428c6adf85 100644
--- a/src/util/util.js
+++ b/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)