Tabs - use native anchors

[zemlanin]

We made a TPA with <Tabs>. In it, each tab's onClick handler navigates to a tab-specific URL. It seems reasonable to expect that Cmd+click (or middle-mouse-button click; or right click + "Open in a new tab"; or whatever) should also be possible. It is not, because…

<Tab> component is rendered as a <span>, we can't pass href and get most of native behavior (like Cmd+click to open link in a new tab) without re-implementing it in JS

As a possible fix, I see using <a> element instead of <span> if href is in props

[jonathanadler]

Hey @zemlanin
That's an interesting issue.
However, the problem is that the Tabs components acts as a tabpanel and not (necessarily) as a navigation element.
That's the reason why we haven't used anchors - it isn't used to navigate between pages.
Maybe a Menu component (which is planned to be in the library) will suite you better?
If not, then we might need to check with the designers and our a11y advisor.

[zemlanin]

the Tabs components acts as a tabpanel and not (necessarily) as a navigation element

Line between tabpanel and "list of links" can be blurry. Like in our case: click on a tab updates part of the page, but this part has a unique URL

Maybe a Menu component (which is planned to be in the library) will suite you better?

I have no idea what goes/will go into Menu, so I don't know if it'll be better than Tabs 🤷‍♂

[jonathanadler]

I see...
I would suggest asking your designer/product contact our designer team, and see which component will suite your needs best.
I'll email you their details

[jonathanadler]

I'm closing this for now, as this is the intentional behaviour of the Tabs component