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.

[geroyche]

adding a blank href attribute to the links causes tabs to trigger a route reload btw.

at least when angularjs is used in html5 mode, where a doc base is set via the base html element.
when hovering over the links i can already see that the base is the real link target, clicking a link will then, as expected, load the base route. if i remove the empty href, no re-routing occurs.

[icfantv]

@geroyche, this issue has been beaten to death in the forum under several different issues. We had recently switched to <div> elements instead of <a> but that breaks Bootstrap's CSS (and custom theming) so we reverted it. Your best bet here is to use a custom template if you desire different behavior. See #4533, #5361.

[geroyche]

thanks. can't say i found much with regards to forum discussions, so i asked here. maybe my search terms were wrong ;)

[geethaar09]

Is this issue about using the tab key to tab through the tabs or using the arrow keys to move to the next/previous tabs? For one of our customer with keyboard only users, they find it hard to tab through each tab before they can get to the tab content, so they want tab key to take them to the tab content and arrow keys to take them to the next tab. I was looking for a solution for this issue and it seems like this is not supported in the tab directive and can be achieved only through JS - https://codepen.io/jeffsmith/pen/YqrzOa

Has anyone resolved this issue?