Dynamic tabs: use buttons rather than links (#32630)

* Dynamic tabs: use buttons rather than links

- change docs
- add mention that tabs should be <button> elements
- tweak styles to neutralise border and background

* Update js unit and visual test accordingly

- replace links with buttons
- make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate
- Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it)

* Add isolation:isolate to prevent focus being overlapped

https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766

1 files changed, 5 insertions, 0 deletions

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 30c2c819b..2534f7f77 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -43,12 +43,15 @@
 
   .nav-link {
     margin-bottom: -$nav-tabs-border-width;
+    background: none;
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
     &:hover,
     &:focus {
       border-color: $nav-tabs-link-hover-border-color;
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      isolation: isolate;
     }
 
     &.disabled {
@@ -80,6 +83,8 @@
 
 .nav-pills {
   .nav-link {
+    background: none;
+    border: 0;
     @include border-radius($nav-pills-border-radius);
   }