fix(demo): tab demos improved layout and accessibility

Tab demos
- use internal tab content views to auto- inject ARIA features
- fixed to layout tab buttons properly
- fixed to paginate only when necessary.
- support arrow key navigation and autofocus of selected tab;
- synchronized key tab selection with tab content.

docs/app/css/style.css

@@ -119,19 +119,8 @@ iframe.demo {
   border-top: 1px solid #ddd;
 }
 .demo-frame-container {
-  background: #fff;
-  z-index: 1;
-  -webkit-transition: 0.2s ease-out all;
-  -moz-transition: 0.2s ease-out all;
-  transition: 0.2s ease-out all;
-  -webkit-transform: translate3d(0, -440px, 0);
-  -moz-transform: translate3d(0, -440px, 0);
-  transform: translate3d(0, -440px, 0);
-}
-.demo-frame-container.below {
-  -webkit-transform: translate3d(0, 0, 0);
-  -moz-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
+    background: #fff;
+    z-index: 1;
 }
 
 material-toolbar.demo-toolbar,
@@ -155,15 +144,19 @@ material-toolbar.demo-toolbar material-button {
 }
 
 .demo-source-container {
+    display:block;
   border: 1px solid #ddd;
+  background-color: #f6f6f6;
+  height:400px;
 }
+
 .demo-source-content {
   height: 400px;
 }
 .demo-source-content,
 .demo-source-content pre,
 .demo-source-content code {
-  background: #f4f4f4;
+  background: #f6f6f6;
 }
 .demo-source-content pre {
   max-width: 100%;

docs/templates/readme.template.html

@@ -6,7 +6,7 @@
 
     <section ng-repeat="demo in currentComponent.demos" 
       class="demo-container material-whiteframe-z1"
-      ng-class="{'no-source': !demo.$showSource}">
+      ng-class="{'no-source': !demo.$showSource}" layout="vertical">
 
       <material-toolbar class="demo-toolbar"> 
         <div class="material-toolbar-tools">
@@ -19,26 +19,21 @@
         </div>
       </material-toolbar>
 
-      <material-tabs ng-show="demo.$showSource">
+      <material-tabs ng-show="demo.$showSource" style="border-top: solid 1px #00ADC3;">
         <material-tab ng-repeat="file in demo.$files"
                       active="file === demo.$selectedFile"
                       ng-click="demo.$selectedFile = file"
                       label="{{file.basePath}}">
+            <material-content scroll-y class="demo-source-container">
+                    <hljs code="file.content"
+                          lang="{{file.fileType}}" >
+                    </hljs>
+            </material-content>
         </material-tab>
       </material-tabs>
 
-      <material-content scroll-y class="demo-source-container" ng-show="demo.$showSource" >
-        <div class="demo-source-content">
-          <div ng-repeat="file in demo.$files">
-            <hljs code="file.content"
-              lang="{{file.fileType}}"
-              ng-show="file === demo.$selectedFile" >
-            </hljs>
-          </div>
-        </div>
-      </material-content>
 
-      <div flex ng-class="{'demo-frame-container': demo.$showSource, below: demo.$showSource}">
+      <div flex class="demo-frame-container">
         <iframe class="demo"
                 name="{{demo.id}}"
                 ng-src="{{demo.indexFile.outputPath}}">

src/components/tabs/tabs.js

@@ -376,8 +376,8 @@ function TabsDirective($compile, $timeout, $materialEffects, $window, $$rAF, $ar
           function updatePagination() {
 
             var tabs = buttonBar.children();
-            var tabsWidth = element.prop('offsetWidth') - PAGINATORS_WIDTH;
-            var needPagination = (TAB_MIN_WIDTH * tabs.length) > tabsWidth;
+            var tabsWidth = element.prop('clientWidth') - PAGINATORS_WIDTH;
+            var needPagination = (tabsWidth > 0) && ((TAB_MIN_WIDTH * tabs.length) > tabsWidth);
             var paginationToggled = (needPagination !== pagination.active);
 
             pagination.active = needPagination;