Nav Bar & Tabs - Tabindex for Inactive Elements

[dakotareese]

Actual Behavior:

• What is the issue? * Currently the tabindex for inactive elements in the Nav Bar & Tab components is set to -1. This renders inactive tabs essentially invisible to screen readers.
• What is the expected behavior?
  If the tabindex was set to zero, the same as the active tab, both the Nav Bar & Tab components would be more accessible to all users (not just screen readers).

CodePen (or steps to reproduce the issue): *

• Inspect element on either the Tabs or Nav Bar demos to view the current values. If you use the tab key on your keyboard to cycle through interactive elements on the rendered page, you will see that the elements with tabindex="-1"are completely skipped over.

Angular Versions: *

• Angular Version:
• Angular Material Version: 1.1.0

Notes: If the core team would be willing to review it, my team would be happy to open a PR for this change.

[ThomasBurleson]

@dakotareese - please submit a PR and let's see if we can merge in your changes. Thank you.

[dakotareese]

Thanks @ThomasBurleson

You'll probably be seeing more accessibility issues from me/us. I'd love to DM you somewhere to give you a little more context as to where they are coming from.

[crisbeto]

@dakotareese I'm not sure that every item is supposed to be a tab stop. At least in the tabs this seems to be very deliberate: the user can tab through to the active tab and then use the arrow keys navigate around, or tab again to skip directly to the content. I can imagine that this could be annoying for the user if there were 15 tabs and each one of them was a tab stop.

That being said, I'm not sure why the navbar's items aren't being read out. The tabindex doesn't really help in this situation.

[crisbeto]

FYI @dakotareese here's what the spec says regarding inactive tabs being tab stops:

The active tab is placed into the tab order. Only the active tab should be in the tab order.

I'll keep the issue open to track why the navbar's tabs aren't being read out by screen readers.