Material: tabs: visual indicator of focus is missing

[avakatushka]

Bug

CodePen and steps to reproduce the issue:

When you go through the page using tab key (for example, tabs demo) you can see no indicator of that the md-tabs element have recieved focus. But if you use arrow key to navigate through md-tabs, visual indicator appears, and keeps working properly.

Detailed Reproduction Steps:

1. Go to Tabs Demo Page https://material.angularjs.org/1.1.5/demo/tabs
2. Press tab long enough, to get to ONE/TWO/THREE tabs under Dynamic Height example
3. See that there is no visual indicator of focus
4. Use left and write arrows
5. See that now visual indicator of focus appeared

What is the expected behavior?

Visual indicator appears immediately that the focus is set on md-tabs element.

What is the current behavior?

Visual focus is not present than it should be.

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

Accessibility guideline: "Confirm that a visual indicator is present for each element that currently has keyboard focus."

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

• AngularJS: The one used in AngularJS Material demos
• AngularJS Material: 1.1.10 (could see the issue in current demo)
• OS: Mac OS
• Browsers: Chrome, Safari

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

Screenshot with right and wrong version

[codymikol]

Can confirm this is an issue on 1.1.10 as well

[Splaktar]

It looks like this is working properly in 1.1.4 and that this is a regression introduced in 1.1.5.

This is probably related to one of the following:

• tabs: accessibility and keyboard interaction fixes (#10706) (072f832), closes #10075
• tabs: add proper RTL support. (#9301) (338ca27), closes #9292
• tabs: allow right and left arrows to cycle through tabs (#10786) (bf6e567)
• tabs: hide md-tab-content elements entirely when inactive. (#10776) (c886286)

[codymikol]

After a git bisect, it looks like

tabs: accessibility and keyboard interaction fixes (#10706) (072f832), closes #10075

is causing the issue. I'm going to take a closer look.

[codymikol]

I currently have the tab focus working in master, but I just checked out a diff of the files from the parent of the bad commit. It looks like the issues reside in a combination of tabsController.js and tabsDirective.js. I'm going to see if I can figure out what exactly is causing the focus to disappear by removing diffs one by one 🤷‍♂️

[codymikol]

Fixed, going to make a PR soon.

[avakatushka]

Thank you so much! Cool that you fixed it!