tabs: accessibility issue with tab headers

[sameer-kumar]

I am trying to create a web page using md-tabs component.
My tab control has 4 tabs. When I press the tab key on these tab items, I have noticed, the focus goes to the tabs in dummy tabs first and then comes to the first visible tab. So for my tab component with 4 tabs, it comes to the first tab after pressing tab key 5 times

• What is the expected behavior?
  Tabs should work in sequential manner and it should not have a unwanted , hidden tabstops.
  After looking into the
  code lines

it seems that the reason behind extra tab stops is because of dummy tabs
CodePen (or steps to reproduce the issue): *

<md-tabs md-selected="selectedIndex" layout="column" class="tabs" md-border-bottom >
        <md-tab ng-repeat="tab in vm.tabs"  layout="column" tabindex="0" >
            <md-tab-label >
                <span class="tabHeader" aria-label="{{::tab.title}}" >{{::tab.title}}</span>
                </md-tab-label>

            <md-tab-body >

                <div bindonce ng-repeat="s in ::tab.tabItems" style="padding-left:25px;background-color: white;padding-bottom:20px">
                    <div aria-label="{{::s.text}}" tabindex="0">
                        <h3  aria-hidden="true" tabindex="-1">{{::s.text}}</h3>
                    </div>
                    </div>
            </md-tab-body>
        </md-tab>
    </md-tabs>

Angular Versions: *

• Angular Version:v1.5.7
• Angular Material Version: v1.0.9

Additional Information:

• `Browser Type: Chrome
• `Browser Version: 52
• `OS: Win 10
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[manish2535]

I can confirm this as well. Both the real and the dummy tab headers have the attr role="tab" and are inside the <md-tabs-canvas> element with the attr role="tablist". Thus even the dummy tabs are counted as a separate tab here.

For a <md-tab> element with 2 tabs, you hear the screen reader say tab 3 of 4 selected on initial focus. It should be 1 of 2 instead.

There is yet another problem here. The <md-tab-content> which does NOT belong to the active tab should have attr aria-hidden="true" so as to prevent users from reading the contents of the unselected tab.

[rgthree]

This can be seen on the Angular Tabs demo page with ChromeVox. Two issues confirmed:

1. ChromeVox's Highlighted area is incorrect (on invisible tabs, not visible ones). See gif below.
2. ChromeVox announcement range is 11-20, not 1-10:
   1. Should be: "One; tabs selected one of ten"
   2. Actual: "One; tab selected eleven of twenty"