Angular-ui bootstrap Tab directive accessibility issue.

[justin-john]

Tab switching doesn't happen through keyboard.

[justin-john]

Any suggestion please?

Shall I try my own to fix this issue with commit?

[MrSnickers]

The inability to switch tabs from the keyboard is a problem in my project too.

[chrisirhc]

Is this solved on Twitter's Bootstrap? If it is, we can study their solution and apply it here.

[justin-john]

@chrisirhc In my observation, this issue doesn't have any correlation with twbs/bootstrap. It's because of the tabs template structure causing this issue.
Below is the anchor tag of tabs template for angular tabs directive.

<a ng-click="select()" tab-heading-transclude>{{heading}}</a>

If we add an attribute "href" to above anchor tag. The accessibility will work perfect.

<a href ng-click="select()" tab-heading-transclude>{{heading}}</a>

The Bootstrap3 tabs are already working fine. Did angular-ui had taken accessibility as an major development phase?

@MrSnickers I think, you can override the tabs template(Adding a href to anchor) in your own application to fix this accessibility issue.

[MrSnickers]

Thank you @justin-john, I saw from your solution that the anchor needs an href in order to be a tabbable element. I have a jQuery file now that just inserts an empty href into the anchor and makes it keyboard accessible. This is not a long-term solution.
@chrisirhc, If a blank href is included in the tabset directive template, the tabsets would be keyboard navigable out-of-the-box.

[justin-john]

@MrSnickers I would prefer you to override the tabs template instead of doing the jQuery stuff to add href. This link will help you to override template.

[chrisirhc]

@justin-john the tabs here are based on the twbs/bootstrap implementation. You mention that Bootstrap 3 tabs are working fine, that's what the twbs/bootstrap repository is.

What I'm saying is that we can study what Bootstrap 3 is doing and apply their code here. I don't have the spare cycles to investigate this right now, so it would be helpful if someone else looks at this, or at least identify Bootstrap 3's solution to this.

---

Edit: I missed @MrSnickers 's comment. Got it. I see that #2870 fixes this.