I'm using AngularUI Bootstrap like this to create a tabset:
...
<tabset>
<tab heading="First Tab">
<div>First Content Here</div>
</tab>
<tab heading="Second Tab">
<div>Second Content Here</div>
</tab>
</tabset>
...
The code that is output to the page looks like this:
...
<ul class="...">
<li ng-class="..." heading="First Tab" class="...">
<a href ng-click="select()" tab-heading-transclude class="ng-binding">
First Tab
</a>
</li>
<li ng-class="..." heading="Second Tab" class="...">
<a href ng-click="select()" tab-heading-transclude class="ng-binding">
Second Tab
</a>
</li>
</ul>
<div class="tab-content">
<!-- tab contents here -->
</div>
...
The problem I have, is the heading links can't be selected via the keyboard because they're missing a tabindex. Obviously, I can't just add that in because angular is creating the filler HTML for the list, and adding a tabindex to the tab element next to the heading attribute just adds it to the li and not the a tag where it needs to be.
Is there a way to define a tabset and also pass in an attribute like a tabindex to be placed on the navigation (heading) links?
