Use anchor tags as Tab links

[nielsdB97]

I think it'd be better for semantics to use <a> tags instead of <li> tags for the Tab buttons. This article reminded me of this, stating that

If it (the button) goes to a different URL or changes most of the page’s content, use a link (…)

I reckon a tab usually does change most of the page's content, so we should use anchor tags.

[nielsdB97]

Please let me know if this is desired, if so I'd be happy to submit a PR 👍

[twidero]

Agreed. Use basic html rather than scripting <li> tags to be clickable.

Take the example with Avengers icons in the tabs: http://reactcommunity.org/react-tabs/ If one of these icons has an empty alt="" tag, a WCAG-validator like aXe won't notice the bug because it doesn't recognise <li> as a clickable element that must have readable content.

[evoyy]

I think this would be good for SEO. Most of my content is accessed via tabs and I'm not sure that search bots are seeing it. For now I'm using anchors inside the tabs like this:

    <TabList>
      <Tab><a>Title 1</a></Tab>
      <Tab><a>Title 2</a></Tab>
    </TabList>

[larrybotha]

It wouldn't necessarily be a link, either, as a button could be appropriate depending on the context, too.

A link could suggest:

• hashed navigation between tabs on a single page
  • e.g. each TabPanel represents a different hash on the URL (example.com#tab-panel-1, etc.), or
• navigation between different URLs
  • e.g. each TabPanel represents a different URL inside a router (example.com/path-1, etc.)

A button would be appropriate if you're changing content without affecting the URL.

Defaulting to a link or button, and allowing the user to override the tag would likely be a good approach while maintaining semantic use of the HTML tags used for interaction

[encryptblockr]

will this ever be implemented? will b e great to have this