Dynamic tabs: use buttons rather than links

[patrickhlauke]

• change docs
• tweak styles to neutralise border and background

this is more semantically correct. note that currently, the forced :focus in reboot styles is making this look rather ugly - see separate PR #32631 to remove that cargo culted (?) style from reboot.

Preview: https://deploy-preview-32630--twbs-bootstrap.netlify.app/docs/5.0/components/navs-tabs/#javascript-behavior

[patrickhlauke]

set to draft for now while we wait for #32631 - once that is in place (removing the forced :focus style on buttons), this works cleanly.

only minor concerns:

• .nav-link used on buttons may not seem logical, but changing the class name now would be a breaking change
• the buttons have black, rather than link-blue, text

[mdo]

We should include some docs mentions here for why we use <button> elements here.

[patrickhlauke]

We should include some docs mentions here for why we use <button> elements here.

added a short sentence to explain. also took opportunity to update the visual and unit tests

[patrickhlauke]

Put back the two tests that I had originally shelved. This should keep this PR focused and non-breaking

[patrickhlauke]

🚀

[MickL]

Has this been published with beta2 6 days ago? For me buttons still dont look good inside nav-tabs and nav-pills:

Using the exact code from the docs with button instead of a:

<ul class="nav nav-pills">
  <li class="nav-item">
    <button class="nav-link active" aria-current="page">Active</button>
  </li>
  <li class="nav-item">
    <button class="nav-link">Link</button>
  </li>
  <li class="nav-item">
    <button class="nav-link">Link</button>
  </li>
  <li class="nav-item">
    <button class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</button>
  </li>
</ul>

Btw. would love to use button instead of a in tabs in 4.6.x, too! I saw there is a label to backport :)

[patrickhlauke]

@MickL if you're using the exact same code as in the docs, but it's looking different from https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior, then it's likely some other modification/customisation you're doing that's affecting this?

if not, please submit a fresh issue with a reduced test case, in case we've missed some nuance of how styles interact with each other in specific conditions

[MickL]

@patrickhlauke obviously it is exactly the same BUT i changed <a> for <button>

The issue I opened has been closed in favor of this PR: #32945

[ffoodd]

@MickL Our current docs example (linked by Patrick) is working fine with button, this is why this PR got merged and your issue closed.

If you still see any issue related to this in beta 21, please open a new issue—and stop spamming an already merged PR that we cannot re-open.