[docs-infra] Fix Base UI API tabs layout regresions about material-ui

[danilo-leal]

8. Broken Tabs aria-role on https://mui.com/base-ui/react-button/components-api/

About the last item on the list: I'm assuming we can only fix this if we change the approach from having the Tab render an <a> tag to rendering an actual <button>, right? I've tried to fix this issue, and from what I've looked around, it's very uncommon to have tabs with links instead of buttons. I'm also wondering if the item above (broken arrow navigation) has anything to do with this...

[oliviertassinari]

it's very uncommon to have tabs with links instead of buttons

@danilo-leal I disagree, using links with tabs looks common to me. The closer the tabs is to the top of the page, the more likely its state should be stored in the URL. For example, we need to change from button to link in https://github.com/mui/mui-private/issues/392 for the tabs of the store product pages. Or on this very page, the top is a list of tabs with links: https://primer.style/components/tab-nav/react/alpha.

Or on https://hub.docker.com/repositories/, looks like they used the tabs as link

[danilo-leal]

That's true, okay. But I'm more curious whether that's part of the problem with the wrong aria-role and keyboard navigation. For example, The Material UI tabs component — which is what we're using for the page's tabs — seems to be fine on these two aspects if the Tab is rendered as a button.

[danilo-leal]

However, maybe the GitHub example is not the best as they don't seem to use role="tablist" both in the Primer docs and here. So, it visually looks like a Tabs component, but they're not intending it to be that way under the hood? Anyway, it makes me wonder even more about the question above...

[oliviertassinari]

@danilo-leal I suspect an issue with Base UI Tabs component.

[danilo-leal]

Yup, but those things are happening to the Material UI Tabs; it's what the page uses, so maybe there's a bug there, too.