Follow WAI-ARIA best practices

[ryanflorence]

http://www.w3.org/TR/wai-aria-practices/#tabpanel
http://www.w3.org/TR/wai-aria/roles#tab
http://www.w3.org/TR/wai-aria/roles#tablist
http://www.w3.org/TR/wai-aria/roles#tabpanel

[dfreedm]

The tab and tablist relationship is pretty trivial, but the tabpanel is a bit tricker.

The common expression is to have a paper-tabs bar control a core-pages to select 1 of N pages like so:

<paper-tabs selected="{{selected}}" valueAttr="name">
  <paper-tab name="one">One</paper-tab>
  <paper-tab name="two">Two</paper-tab>
</paper-tabs>

<core-pages valueAttr="id" selected="{{selected}}">
  <div id="one">Page One</div>
  <div id="two">Page Two</div>
</core-pages>

As long as the core-pages and paper-tabs are in the same scope, we can use role="tablist" on the pages, with aria-controls set to the id of the page.
However, if the tabs and pages are in different scopes, there is no way to specify the relationship in ARIA currently.

@alice Yet another candidate for improved ARIA apis

• node reference (easier)

paperTabOne.aria.controls = corePages.firstPage

• a selector (more cumbersome)

paperTabOne.aria.controls = 'select(body /deep/ #pagesControlledByThisTabList > [id="' + paperTabOne.getAttribute('name') + '"])'