Compatibility for BS3 style content fading

[cpsievert]

Maybe not relevant for shiny, but is relevant for rmarkdown's .tabset-fade class. A minimal example:

library(htmltools)
browsable(withTags(body(
  bslib::bs_theme_dependencies(bslib::bs_theme(version = 4)),
  ul(
    class="nav nav-tabs", role="tablist",
    li(
      role="presentation", class="active",
      a(
        href="#home", "aria-controls" = "home", role="tab", "data-toggle"="tab",
        "Home"
      )
    ),
    li(
      role="presentation",
      a(
        href="#about", "aria-controls" = "about", role="tab", "data-toggle"="tab",
        "About"
      )
    )
  ),
  div(
    class="tab-content",
    div(
      role="tabpanel", class="tab-pane fade in active", id="home",
      "Foo"
    ),
    div(role="tabpanel", class="tab-pane fade", id="about",
        "Bar"
    )
  )
)))

[cpsievert]

A workaround for this issue is to use BS4 nav markup (i.e., put .nav-link on <li>,.nav-link on <a> and place active on the <a> instead of the <li>):

browsable(withTags(body(
  bslib::bs_theme_dependencies(bslib::bs_theme(version = 4)),
  ul(
    class="nav nav-tabs", role="tablist",
    li(
      role="presentation", class="nav-item",
      a(
        href="#home", "data-toggle"="tab",
        class="nav-link active",
        role="tab", "aria-controls"="home",
        "Home"
      )
    ),
    li(
      role="presentation", class="nav-item",
      a(
        href="#about", "data-toggle"="tab",
        class="nav-link",
        role="tab", "aria-controls"="home",
        "About"
      )
    )
  ),
  div(
    class="tab-content",
    div(role="tabpanel", class="tab-pane fade in active", id="home", "Foo"),
    div(role="tabpanel", class="tab-pane fade", id="about", "Bar")
  )
)))

[cpsievert]

Note also that this doesn't appear to be an issue for bs_theme(version = 5)

[github-actions]

This issue has been automatically locked. If you believe you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.