Merge pull request #18 from PolymerElements/improve-a11y-a-little

Improve a11y for paper-tabs
PolymerElements · May 25, 2015 · bb61f4c · bb61f4c
2 parents 8909469 + 46990c1
commit bb61f4c
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 35 deletions.
diff --git a/bower.json b/bower.json
@@ -15,19 +15,20 @@
   ],
   "repository": "https://github.com/Polymer/paper-tabs/tree/0.8-preview",
   "dependencies": {
+    "iron-behaviors": "polymerelements/iron-behaviors#^0.9.0",
     "iron-flex-layout": "polymerelements/iron-flex-layout#^0.9.0",
-    "iron-selector": "polymerelements/iron-selector#^0.9.0",
-    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^0.9.0",
     "iron-icon": "polymerelements/iron-icon#^0.9.0",
     "iron-iconset-svg": "polymerelements/iron-iconset-svg#^0.9.0",
+    "iron-menu-behavior": "polymerelements/iron-menu-behavior#^0.9.0",
+    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^0.9.0",
     "paper-ripple": "polymerelements/paper-ripple#^0.9.0",
     "polymer": "Polymer/polymer#^0.9.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^0.9.0",
     "paper-toolbar": "polymerelements/paper-toolbar#^0.9.0",
     "test-fixture": "polymerelements/test-fixture#^0.9.0",
-    "web-component-tester": "*",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "web-component-tester": "*"
   }
 }
diff --git a/paper-tab.html b/paper-tab.html
@@ -8,6 +8,12 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-behaviors/iron-control-state.html">
+<link rel="import" href="../paper-ripple/paper-ripple.html">
+
 <!--
 `paper-tab` is styled to look like a tab.  It should be used in conjunction with
 `paper-tabs`.
@@ -25,11 +31,6 @@
 @homepage github.io
 -->
 
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../paper-ripple/paper-ripple.html">
-
 <dom-module id="paper-tab">
 
   <style>
@@ -43,11 +44,15 @@
       position: relative;
       padding: 0 12px;
       overflow: hidden;
-      cursor: default;
+      cursor: pointer;
 
       @apply(--paper-tab);
     }
 
+    :host(:focus) {
+      outline: none;
+    }
+
     :host([link]) {
       padding: 0;
     }
@@ -65,6 +70,11 @@
       opacity: 0.6;
     }
 
+    :host(:focus) .tab-content {
+      opacity: 1;
+      font-weight: 700;
+    }
+
     #ink {
       color: #ffff8d;
       pointer-events: none;
@@ -88,7 +98,7 @@
       <content></content>
     </div>
 
-    <template is="dom-if" if="{{!noink}}">
+    <template is="dom-if" if="[[!noink]]">
       <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98"></paper-ripple>
     </template>
 
@@ -102,6 +112,10 @@
 
     is: 'paper-tab',
 
+    behaviors: [
+      Polymer.IronControlState
+    ],
+
     properties: {
 
       /**
@@ -116,6 +130,10 @@
 
     },
 
+    hostAttributes: {
+      role: 'tab'
+    },
+
     listeners: {
       down: '_onDown'
     },

diff --git a/paper-tabs.html b/paper-tabs.html
@@ -8,6 +8,14 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
+<link rel="import" href="paper-tabs-icons.html">
+
 <!--
 `paper-tabs` makes it easy to explore and switch between different views or functional aspects of
 an app, or to browse categorized data sets.
@@ -57,22 +65,8 @@
         <a href="#link3" class="horizontal center-center layout">TAB THREE</a>
       </paper-tab>
     </paper-tabs>
-
-@group Paper Elements
-@element paper-tabs
 -->
 
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
-
-<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
-<link rel="import" href="../iron-selector/iron-selector.html">
-
-<link rel="import" href="../iron-icon/iron-icon.html">
-
-<link rel="import" href="paper-tabs-icons.html">
-
 <dom-module id="paper-tabs">
 
   <style>
@@ -171,16 +165,14 @@
 
     <div id="tabsContainer" class="flex" on-scroll="_scroll">
 
-      <iron-selector id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]"
-          selected="{{selected}}" selected-item="{{_tab}}"
-          attr-for-selected="[[attrForSelected]]" selectable="paper-tab">
+      <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable)]]">
 
         <content select="*"></content>
 
         <div id="selectionBar" class$="[[_computeSelectionBarClass(nobar, alignBottom)]]"
             on-transitionend="_onBarTransitionEnd"></div>
 
-      </iron-selector>
+      </div>
 
     </div>
 
@@ -200,7 +192,8 @@
     is: 'paper-tabs',
 
     behaviors: [
-      Polymer.IronResizableBehavior
+      Polymer.IronResizableBehavior,
+      Polymer.IronMenubarBehavior
     ],
 
     properties: {
@@ -285,24 +278,32 @@
         notify: true
       },
 
+      selectable: {
+        type: String,
+        value: 'paper-tab'
+      },
+
       _step: {
         value: 10
       },
 
       _holdDelay: {
         value: 1
-      },
-
-      _tab: {
-        observer: '_tabChanged'
       }
+    },
 
+    hostAttributes: {
+      role: 'tablist'
     },
 
     listeners: {
       'iron-resize': '_onResize'
     },
 
+    observers: [
+      '_tabChanged(selectedItem)'
+    ],
+
     attached: function() {
       this.notifyResize();
     },
@@ -334,7 +335,7 @@
     _onResize: function() {
       this.debounce('_onResize', function() {
         this._scroll();
-        this._tabChanged(this._tab);
+        this._tabChanged(this.selectedItem);
       }, 10);
     },
 

diff --git a/test/basic.html b/test/basic.html
@@ -90,6 +90,10 @@
           assert.equal(tabs.alignBottom, false);
         });
 
+        test('has role tablist', function() {
+          assert.equal(tabs.getAttribute('role'), 'tablist');
+        });
+
       });
 
       suite('set the selected attribute', function() {