Menu icon Foundation
Tabs with forms messes up tabindex

If I have a list of tabs and form elements in the tab content section, switching tabs seems to mess the tab index, particularly labels. I only see this when I switch tabs. Has anyone else seen this, or know of a fix?

tabsforms

If I have a list of tabs and form elements in the tab content section, switching tabs seems to mess the tab index, particularly labels. I only see this when I switch tabs. Has anyone else seen this, or know of a fix?

Jay Thatcher about 5 years ago

Our team is experiencing the same problem. Tabindex loads correctly for the first form in the first tab. If we click to another tab, then the tabindex for that form all say "0". When we click back to the first tab, the tabindex that worked previously, no longer works. When different tabs are triggered it seems to overwrite the tabindex information. Please advise if there is a solution. I see that "tabindex" is used in the foundation.tab.js. It seems to be what is overriding the tabindex for our forms. Ideas for a work-around? Please advise.

Pressly Bonner almost 5 years ago

Seeing the same thing here. Would be nice if there was a workaround.

Jay Thatcher almost 5 years ago

Talked with Zurb. They recommended we comment out this line in the foundation.tab.js:
tab_link.attr({"aria-selected": "true", tabindex: 0})

We had a little trouble finding this in the foundation.min.js being used on our Dev site, so here's what we did instead. We did a find/replace looking for tabindex and replacing it with tabindexly. It will replace it in 6 places. We just added the "ly" so we'd know what it relates to, but it not overwrite the accessibility tag, "tabindex." We have this working on our Dev server now.

Reply back if either work for you.

Hope this helps.
—Jay