Remaining accessibility issues

alice commented 10 years ago

Keyboard handling per http://www.w3.org/TR/wai-aria-practices/#tabpanel (as mentioned in #5):
- Tab list should be one focus target; arrow keys should select tabs (and move focus target to selected tab)
- Focus should wrap around the tab list when using arrow keys
Focus style - distinct from selected style (dependent on MD spec)
Style in demo is low contrast
Should set aria-selected on selected tab

Obviously there is the question of associating with the relevant tabpanel element, discussed in #5 - I think this is usable without that (if not ideal).

If a mechanism is later added to programmatically associate a paper-tabs element with a core-pages element (beyond simply having them side by side on the page and sharing data binding), this might be the basic idea:

each (content) child of core-pages would be given a tabpanel role by the core-pages element
each paper-tab would have its aria-controls set to the IDREF of the appropriate core-pages child (or use another mechanism for settings aria-controls if we have one by then)
if IDREFs are the only way to go, a hierarchical ID could be assigned to core-pages children based on the ID of the core-pages element, which could be used as the mechanism for associating paper-tabs with core-pages. (Obviously if the author has set the ID this shouldn't be clobbered - should be straightforward enough to check and use the ID of $(core-pages).childNodes[i]

<!-- attributes in square brackets are written by element, not author -->
<paper-tabs controls="pages" selected=0 [role="tablist"]>
  <paper-tabs [aria-controls="pages.0" role="tab" aria-selected="true"]>
  <paper-tabs [aria-controls="pages.1" role="tab"]>
</paper-tabs>
<core-pages id="pages" [selected="0"]>
  <div [role="tabpanel" id="pages.0"] active>foo</div>
  <div [role="tabpanel" id="pages.1"]>bar</div>
</core-pages>

Obviously all of this depends on paper-tabs and core-pages being in the same scope, but I'd imagine that was the vast majority of cases, if not 100% - let me know if I'm wrong about this. And of course all of the above may have other issues I don't have the in-depth understanding to see! As I said, I think this is usable, though not ideal, without any of this.

kbwatts commented 9 years ago

+1

Also important to re-emphasize Alice's point about the keyboard usability issue - at the moment keyboard users can't use paper-tabs at all :(

You can wrap each tab in a link and use a11y keys, but this is not ideal, and doesn't provide a good solution for when the number of tabs is dynamically generated.

Please keep it in mind for 0.8 if you can :+1: