When I tapped on another tab the bottom bar is supposed to slide to the selected tab, but currently it doesn't do that.

Although documentation states: "If you want to use the attribute value of an element for selected instead of the index, set this to the name of the attribute." there is no implementation of this attribute, nor is there a reference to a behavior implementing this attribute

Here are the accessibility developer tools audit results:

[Warning] Elements with onclick handlers must be focusable (8)[Warning] Text elements should have a reasonable contrast ratio (33)Not applicable tests (9)Passing tests (4)

Major issues:

Contrast: Contrast needs to be checked, especially for the items that are currently not chosen. I know the point is for them to be less visible to indicate that they are not chosen, but it's very hard to read the text. Also, the blue link text over the blue/green background is nearly impossible to read. All contrast must be reviewed here.

Keyboard navigation and focus state: I am not able to navigate to all the Items using just the keyboard and enter. Also, when I am using a screen reader (VoiceOver and ChromeVox) to navigate through, I am able to press the force click key command to actually click on the given item, but this is not triggering the same visual response as when I use the mouse to physically click. Using the mouse, I see a bigger visual animation, so the experience is inconsistent with keyboard vs. mouse. Happy to show you this in person.

Note in regards to roles: Currently, a user using a screen reader would not really know that they could click on the various items to change focus, as there is no spoken feedback indicating that it is in fact clickable. When they are implemented as links, this is different because the user can hear the earcon and spoken text that this is a link. We should brainstorm how we could identify this option to users for the other tab forms though (aside from the links).

Testing in the demo: https://elements.polymer-project.org/elements/paper-tabs?view=demo:demo/index.html

It appears that I can move focus with the left/right keys. If I press Enter, I get a paper-ripple suggesting the item's been activated, but the selection bar doesn't move. It looks like the actual selection sin't changing.

If you change the height and width to 20px instead of 100% you can see them!

Testing in the demo: https://elements.polymer-project.org/elements/paper-tabs?view=demo:demo/index.html

It appears that I can move focus with the left/right keys. If I press Enter, I get a paper-ripple suggesting the item's been activated, but the selection bar doesn't move. It looks like the actual selection isn't changing.

Consider lazily creating optional or user initiated functionality (e.g. scrollable left/right paper-icon-buttons). Similar to what paper-tab is doing for the ripple.

https://github.com/PolymerElements/paper-tabs/blob/master/paper-tab.html#L109-L111

I have set up a paper-tabs instance that came to following dimensions by looking chrome inspector:

#tabsContainer width = 232
#tabsContent width = 408.719

the method _scroll is responsible for deciding to show the right chevron based on the following code

scrollLeft = this.$.tabsContainer.scrollLeft;
...
 this._rightHidden = scrollLeft === this._tabContainerScrollSize;

this._tabContainerScrollSize is calculated in method

get _tabContainerScrollSize () {
  return Math.max(
    0,
    this.$.tabsContainer.scrollWidth -
      this.$.tabsContainer.offsetWidth
  );
},

this.$.tabsContainer.scrollWidth is supposed to match '#tabsContent width', but it is rounding the value up to 409. This cause problems because the expected content width is now longer than in reality. When we reach the end of the tabs content we get the following values:

this.$.tabsContainer.scrollWidth = 409, this should match tabsContent width, which is 408.719
this.$.tabsContainer.offsetWidth = 232
this._tabContainerScrollSize = 177

this.$.tabsContainer.scrollLeft = 176

There is now an extra one pixel we will never be able to scroll, and the right chevron is never hidden

It throws an error "TypeError: null is not an object (evaluating 'this.parentNode.nodeType')" in Safari 7.1.8 (9537.85.17.9.1) (Mac Desktop), and the same error happens in iOS 8.4 Safari. This error breaks other polymer events (like attached) in other components on the same page, making this component unusable on mentioned browsers.

I tracked down the problem and discovered that it is related to paper-ripple element. This element is inside a <template is="dom-if"> tag, and it apparently receives a null pointer when trying to find its parentNode. (Obs: this occurs only in those browser, this problem never occurred on Chrome or Firefox)

I checked paper-button source code to see how they did solve this problem (that element has a noink property too and it works fine over there). I found that they hide the paper-ripple using a CSS selector instead of a dom-if tag.

If we want to use the same solution in paper-tabs, we can change paper-tab.html by removing <template is="dom-if" ...></template> tags and adding an attribute noink=[[noink]] to the paper-ripple. And finally, we can reflect noink atribute to the host. This way we can control paper-ripple display using CSS. Here are the changes:

@@ -97,6 +97,10 @@
       -webkit-flex-basis: 0.000000001px;
       flex-basis: 0.000000001px;
     }
+
+    :host[noink] > paper-ripple {
+      display: none;
+    }
   </style>

   <template>
@@ -105,9 +109,7 @@
       <content></content>
     </div>

-    <template is="dom-if" if="[[!noink]]">
-      <paper-ripple id="ink" initial-opacity="0.95" opacity-decay-velocity="0.98"></paper-ripple>
-    </template>
+    <paper-ripple id="ink" noink="[[noink]]" initial-opacity="0.95" opacity-decay-velocity="0.98"></paper-ripple>

   </template>

@@ -133,7 +135,8 @@
        */
       noink: {
         type: Boolean,
-        value: false
+        value: false,
+        reflectToAttribute: true
       }

     },

PS: I checked the paper-ripple object and it suppresses pointer-events when it has a noink attribute correctly configured.

The focus state is not visible. We need a clearer way to identify which item is in focus.

For convenience, and for parity with what 0.5. It's really easy to forget this extra import.

Should be:

The _holdJob property is created dynamically by paper-tabs.html, it should be declared as a formal property instead.

    _onLeftScrollButtonDown: function() {
      this._scrollToLeft();
      this._holdJob = setInterval(this._scrollToLeft.bind(this), this._holdDelay);
    },
    _onRightScrollButtonDown: function() {
      this._scrollToRight();
      this._holdJob = setInterval(this._scrollToRight.bind(this), this._holdDelay);
    },
    _onScrollButtonUp: function() {
      clearInterval(this._holdJob);
      this._holdJob = null;
    },

No idea what's happening, but both on my own project and the official demo on elements.polymer-project.org the scrollable tabs will not scroll right when I click them. (It does however work on Firefox.) There is a slight judder going through the tabs as if they try to scroll, but no lasting effect. There are no errors on the console and I wasn't able to find where the problem came from at all.

When I set the selected attribute the first time (e.g. hardcoding it in the markup, or binding it to a property which has value whe the element is attached), the selected tab is not highlited with the selection bar.

If I changed the selected attribute afterwards, it works fine.

(version 1.0.0)

When upgrading to 1.0.10 I get breakage with paper-tab::_flattenBehaviorsList]: behavior is null, check for missing or 404 import.

Update:

This issue started at 1.0.9

When array item is removed and another one is added in one splice on model array, paper-tabs just removes removed item from DOM without adding a new one.
Please, take a look at the proof: paper-tabs-splicing-problem on jsbin.com<script src="http://static.jsbin.com/js/embed.min.js?3.34.1"></script>

Using widgets, I'm noticing that if you set the selected attribute the tab is not always selected by default. In addition, clicking on a tab won't select it.

This is my simple test case:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:pw='urn:import:com.vaadin.polymer.paper.widget'

<g:HTMLPanel>
    <pw:PaperTabs selected="1">
        <pw:PaperTab>Tab 1</pw:PaperTab>
        <pw:PaperTab>Tab 2</pw:PaperTab>
        <pw:PaperTab>Tab 3</pw:PaperTab>
    </pw:PaperTabs>
</g:HTMLPanel>

/ui:UiBinder

This is under chrome 44 using 1.0.2.0-alpha3. I don't know if this issue appears in earlier versions of chrome or not.

Under firefox and IE, this does not seem to be an issue, it appears to work 100% of the time.

In addition, if I forgo the widget and use the element approach instead, it appears to work fine under Chrome 44.

Also, if I use the Element approach on Chrome 44, the tab seems to function normally.

If I refresh the widget version of the page enough times, the line does appear and it becomes selectable (maybe 1 time out of 10).

selectionBar is "missing" (width, left are both 0 in _positionBar) after re-showing an element containing the paper-tabs.

The tabs are hidden conditionally, either via a dom-if template OR a hidden$ attribute.

For the hidden variation of the problem, I can work-around the issue by calling _onResize via async. (See _doEvil in my code block below).

Regarding the dom-if variation...
I noticed that .5 tabs have some stuff going on in domReady that is missing from the 1.0 tabs and another issue has been reported here that sounds related (#31). The solution outlined there (I modified it slightly to use async so as to behave more like domReady in 0.5), does not solve my problem because attached does not execute again after the conditional template is once-more truthy... attached executes only once.

Element to duplicate - note that the following is "working" because of the _doEvil function:

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">

<dom-module id="tabs-test">
  <style>
    :host {
      display: block;
      position: relative;
      font-family: sans-serif;
      font-size: 14px;
      color: rgba(0,0,0,.87);
    }

    .toolbar {
      min-height: 48px;
      background-color: #00BCD4;
      margin-bottom: 16px;
    }
  </style> 
  <template>
    <div class="toolbar layout horizontal center" hidden$="{{_isPage3(selected)}}">
      <paper-tabs id="tabs" selected="{{selected}}">
        <paper-tab>PAGE 1</paper-tab>
        <paper-tab>PAGE 2</paper-tab>
      </paper-tabs>
      <span class="flex"></span>
      <paper-icon-button icon="create" on-tap="_showPage3"></paper-icon-button>
    </div>

    <div class="toolbar layout horizontal center" hidden$="{{!_isPage3(selected)}}">
       <paper-icon-button icon="arrow-back" on-tap="_showPage1"></paper-icon-button>
       <span>go back</span>
    </div>

    <div><span>Selected page: &nbsp;</span><span>{{selected}}</span></div>
  </template>

<script>
  Polymer({
    is: 'tabs-test',

    properties: {
      selected: {
        type: Number,
        value: 0,
        notify: true
      }
    },

    _showPage1: function(e) {
      this.selected = 0;
      this.async(this._doEvil);
    },

    _doEvil: function() {
      if(this.$.tabs) {
          this.$.tabs._onResize();
      }
    },

    _showPage3: function(e) {
      this.selected = 2;
    },

    _isPage3: function(selected) {
      return selected === 2;
    }

  });
</script>

</dom-module>

Note that the code above is using the "hidden" approach, not the dom-if.

I originally reported the issue in the wrong repository:
googlearchive/paper-tabs#68

1. Go to the paper-tabs demo page and force the shadow DOM (https://elements.polymer-project.org/bower_components/paper-tabs/demo/index.html?dom=shadow)
2. In example (E) click any scroll button.
3. The scroll button loses focus and the focus goes to the paper-tabs's selectedItem.

This is a problem because it causes a weird effect where the horizontal scroll jumps back to the selected item briefly, this is specially noticeable with fast clicks on the scroll button.

NOTE: This WAI with shadow DOM turned off.

Note: Please note that the first rounds of accessibility testing / issue reporting were done using Chrome on Mac with VoiceOver enabled, as well as Chrome on Chrome OS with ChromeVox enabled. This next round was done on the Windows platform, on both Chrome and Firefox with the NVDA screen reader enabled. Once the team addresses the issues across platforms and screen readers, we will also do a final test using Windows and the JAWS screen reader, a heavily used combo that certainly needs to work smoothly.

Issues:

Firefox /  NVDA: 
The only issue here is that when I navigate to the start of each tab (on the left) with the keyboard, the first spoken feedback says ""clickable clickable item one"". This repetition of the word clickable only occurs at the start (leftmost region) of each tab, not for items two and three. 
Chrome / NVDA: 
When navigating with the keyboard / NVDA, navigation is fine. However, as mentioned in a previous bug report, when I use the keyboard to activate one of the items, I do not get the visual animation that I get when I use the mouse. This is an inconsistency. and does seem to work on Firefox. 

Take following example

<div style="display:hidden">
    <paper-tabs scrollable="true">
        <paper-tab>TAB 1</paper-tab>
        <paper-tab>TAB 2</paper-tab>
        <paper-tab>TAB 3</paper-tab>
    </paper-tabs>
<div>

When this is the paper-tabs is initialized it calls a method _scroll which sets ups properties to control if the chevrons should appear. It decides to show the right chevron based on the code below

scrollLeft = this.$.tabsContainer.scrollLeft;
this._leftHidden = scrollLeft === 0;
this._rightHidden = scrollLeft === this._tabContainerScrollSize;

however because the parent is hidden this._tabContainerScrollSize evaluates to zero and so the right chevron is marked as hidden. When the tab bars are later displayed, by tapping a button and running code, the chevron remains hidden because the _scroll method is not call again.

I worked around the issue by setting my parent div to have a height of zero and hiding the over scroll. I make the tabs visible by changing the height.

Additionally item to note is that the right chevron is still there and can interacted with even though it is missing from the screen. This is because the code is using opacity to hide the chevron.

After long time trying understand what happen if my paper-tab with parameters hideScrollButtons and scrollable, I found a problem that I think is general for all Polymer Componentes 1.0.

If I rename this param: hideScrollButtons to hidescrollbuttons, without any UpperCase char, this work fine, the problem is same for all parameters that have any uppercase char, some like: disableDrag, noSlide and noBar.

On a Mac osX, when using scrollable tabs, tapping the mouse pad (as opposed to clicking the mouse button) only gets the tabs to scroll one character per tap.

This is largely fine, but please check the contrast level. It is very difficult for me to read the text of the non-selected items on top of that blue background, especially on a small mobile device.

The demo examples illustrate tab _headers_ but omit tab _content_.

Please demonstrate how to make tab headers control content.

See demo F.

to test use PSK 1.0.3 and replace

View the demo (https://elements.polymer-project.org/elements/paper-tabs?view=demo:demo/index.html) in a mobile browser and tap away and hold in the arrows. Eventually they start flickering and they stop working.

Right now there is no way to custom style the ripple color (right now is set to #ffff8d) and the unselected content (right now is set to opacity: 0.6).

https://elements.polymer-project.org/elements/paper-tabs

Works beautifully in the 0.5 version...

From @dman777 on June 19, 2015 0:48

Using Polymer 1.0, the paper-tab elements are not responsive to the size of their content/titles. Instead, all the tabs are a fixed size and it looks bad. From what I can tell, the default behavior is for them to be responsive to their contents. Can anyone clarify this please? Is this a bug?

<!doctype html>
<html>

<head>

  <title>unquote</title>

  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

  <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
  <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
</head>
<body>
  <paper-header-panel>
    <paper-toolbar>
        <paper-tabs>
          <paper-tab>
              ABOUT
          </paper-tab>
          <paper-tab>
            <div>
              TOUR SCHEDULE
            </div>
          </paper-tab>
            <paper-tab>
              <div>
                VIDEOS
              </div>
            </paper-tab>
            <paper-tab>
              <div>
                HOST
              </div>
            </paper-tab>
            <paper-tab>
              <div>
                LONG TITLE THIS IS
              </div>
            </paper-tab>
        </paper-tabs>
    </paper-toolbar>
  </paper-header-panel>
</body>
</html>

Copied from original issue: Polymer/polymer#1914

• The "active" indicator at the bottom seemed to be missing on Chrome when we did the audit.

With direction=rtl paper-tabs shows left arrow on right side (element start) while it's supposed to show it on the left side (element end), same for the right arrow.

Demo

You can repro this on the demo page. Make the viewport large enough that the right and left chevrons are not visible. Tab through the tabs, and you'll notice that the right chevron still receives focus.

Designer has an old fork of tabs modified to layout vertically. It'd be great to merge into one implementation.

This is a request to remove or have some kind of control over(when not used in a custom element):

    :host(:not(.iron-selected)) > .tab-content {
      opacity: 0.8;
    }

What does the link attribute for paper-tab do? Why would I want to use it?

from https://elements.polymer-project.org/elements/paper-tabs , if I click on See paper-tab for more information about paper-tab. I see in the url https://elements.polymer-project.org/elements/paper-tabs#paper-tab but nothing changes on the page.

It would be nice if there was a simpler way to style the selected tab's text color. In the Material Design spec they recommend that the text color should match the selection bar for the light theme:

Perhaps there could be a --paper-tab-selected-color or --paper-tab-selected-text-color?

At the moment, I'm trying to style it like:

.iron-selected {
  --paper-tab {
    color: #4184f3;
  };
}

But that doesn't work. What did work was using /deep/ but that is an expensive option :-/

  body /deep/ paper-tab.iron-selected {
    color: #4184f3;
  }

• doesn't seem to correctly select the focused tab
• should move between tabs, i.e. it shouldn't just be limited to the arrow keys
• Can we set tabindex=0 on all of the tabs? Or alternatively, can we allow for styling mixins for the focused tab?

When someone clicks on any of the tabs, I want to give the ripple effect just like the nav on this page: https://newslab.withgoogle.com/experiments

Please point me in the right direction.

See demo F.

I'd like to see how it looks like without checking the source out. Is that possible?

See https://github.com/PolymerElements/paper-tabs/blob/master/paper-tabs.html#L36

This is important when apps want to use global keyboard shortcuts. As is, both the tab navigation action, and the global shortcut action are performed, which is bad for a11y.

For scrollable tabs the arrows should only be shown when there is more tabs to show.

In the following example, the < next to NUMBER ONE ITEM should not be shown.

When using paper-tabs (Polymer 1.0) inside a flexbox without a specific width, they disappear in IE (10 as well as 11).

<div class="horizontal layout center">

  <div class="flex">This is flex</div>

  <paper-tabs>
    <paper-tab>Paper</paper-tab>
    <paper-tab>Tabs</paper-tab>
  </paper-tabs>

</div>

Any solution as I guess I should be able to use it this way (I'm very new to Polymer).