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

[oliviertassinari]

Problem

#35938 introduced a number of UX problems that we didn't have before:

• 1. TOC scroll sync. Details on the problem: [docs][base] Show components & hooks API on the components page #35938 (comment)
• 2. Duplicate page title. Details on the problem: [docs][base] Show components & hooks API on the components page #35938 (comment)
• 3. Duplication of SVG icons. Details on the problem: [docs][base] Show components & hooks API on the components page #35938 (comment)
• 4. API module names shouldn’t be translated. Details on the problem: [docs][base] Show components & hooks API on the components page #35938 (comment)
• 5. Broken API link between pages, 301 links, reported by ahrefs. Details on the problem: https://app.ahrefs.com/site-audit/3992793/50/data-explorer?columns=pageRating%2Curl%2Ctraffic%2ChttpCode%2CredirectChainUrls%2CisRedirectLoop%2CincomingAllLinks%2CincomingRedirect%2Corigin&filterId=808b08e88c934ee19e04fdec4ed87a5a&issueId=c64d12c1-d0f4-11e7-8ed1-001e67ed4656&sorting=-pageRating&udUrl=https%3A%2F%2Fmui.com%2Fbase-ui%2Fapi%2Fpopper%2F
• 6. [docs-infra] Fix algolia links to API props #40402
• 7. Broken Tabs arrow navigation on https://mui.com/base-ui/react-button/components-api/ (Solved in [docs-infra] Fix keyboard navigation on page tabs #42152)
• 8. Broken Tabs aria-role on https://mui.com/base-ui/react-button/components-api/ (Solved in [docs-infra] Fix keyboard navigation on page tabs #42152)

Context

As of today, I don't think that the tabs experience yields a stronger UX. We know it varies from person to person, so only talking for myself, it's not there.

I think that fixing these UX regressions would make it to the point where maybe it would be a superior UX for most people. I could understand why.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Base UI API tabs layout regresions

[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.