Material: nav-bar: traps focus when using md-nav-sref

[NilsAtGoogle]

Bug, enhancement request, or proposal:

mdNavBar incorrectly has tabindex="0" set for all mdNavItems, which results in a focus trap, as only the selected tab is meant to have tabindex="0" I have a proposed fix below in "anything else"

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

https://codepen.io/nil_ptr/pen/OdByjx?&editable=true

Detailed Reproduction Steps:

1. Tab into a nav bar using mdNavHref or mdNavSref. The selected item will get focus
2. Press tab again

What is the expected behavior?

Focus leaves mdNavBar

What is the current behavior?

Focus stays on selected nav item

What is the use-case or motivation for changing an existing behavior?

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: v1.6
• AngularJS Material: latest (can repro in v1.1)
• OS: mac
• Browsers: chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

I've tried to figure out what's setting tabindex to 0, but a workaround is to explicitly set all tabindex attributes in the _updateTabs function:
tabs.forEach((tab) => tab.setSelected(tab === newTab));

This is a pretty severe a11y issue, please address soon.

[Splaktar]

Thank you for the report. It seems to work well with md-nav-click as you can see in the demo, but the behavior is certainly not correct with md-nav-sref.

I also updated the CodePen to try md-nav-href and that seems to work properly.

[NilsAtGoogle]

The same wrong behavior exists when using mdNavHref as well. It's extremely puzzling -- I poked around AngularJS' ngAria to see if something was setting the tabindex back to 0, but didn't have much luck. I also ran the debugger on setSelected to see if it was going rogue and setting some tabindex attributes incorrectly, but that also seems to be working?

The code above works, although it will execute in O(n) for number of nav items vs O(2)...but given the typical number of nav items, I think it's a worthwhile fix if the root cause proves difficult to discover.

[Splaktar]

I'm able to tab out of the "Page Three" tab using md-nav-href in the demo I posted above.

There does appear to be an issue with the setting of tabindex values which might be spilling over in some cases to other items.

[NilsAtGoogle]

What's happening is that the expected setup is the active nav item has tabindex of 0; the inactive ones have tabindex -1. Pressing tab normally causes focus to leave the nav bar, but since the next nav item is focusable, code is triggered with refocuses on the active item, causing a focus trap.

When you're on the last nav item, the focus leaves the nav bar as is expected with the focus order

[Splaktar]

I've tracked this down to this code in md-button:
https://github.com/angular/material/blob/aa172b709dcf4f2c0af3f38438159302f5ba8145/src/components/button/button.js#L149-L155