How to disable a bslib::nav_panel

[fzenoni]

I've always worked with the default Shiny UI until last week, so apologies if this is a trivial question.
I'd like to create a disabled tab that shows up but the user can't click on.

Before bslib, I was doing the following, which admittedly wasn't ideal.

tabPanel(
HTML(
"<span id='disabled_tab' alt='En cours'>De l'enseignement vers le marché du travail</span>"
),
icon = icon("briefcase")
)

and then

tags$script(
      HTML(
        "
    $(document).ready(function() {
      $('#disabled_tab').parent('a').removeAttr('href').css({'pointer-events': 'none', 'color': '#777'});
    });"
      )
    )

but it looks like it's not an option anymore. What's the best way to achieve this result with bslib?

[gadenbuie]

Can you describe the behavior you're wanting or expecting from the disabled tab? Should it be clickable? Does the tab content show up? Do you just want a faded icon in the navbar? etc.

[fzenoni]

Thanks for your answer, and sorry, I should have been more specific.
I'd like to have a non-clickable "grayed out" tab link that exists among other tabs only to "tease" future developments. From the behavior perspective, something similar to a disabled button in HTML.

Just a hypothetical, but would using shinyjs::disable() be a possibility? And if yes, how?

[fzenoni]

This is the solution I found.
I could be happy with it, but is there a solution that doesn't involve injecting JavaScript?

library(shiny)
library(bslib)
library(shinyjs)

ui <- tagList(
  useShinyjs(),
  tags$head(
    tags$style(HTML(
      "
      a.nav-link.disabled {
        pointer-events: none;
        opacity: 0.5;
      }
    "
    )),
    tags$script(HTML(
      "
      // Wait a bit for the tabs to be rendered
      setTimeout(function() {
        const tab = document.querySelector(\"a[data-value='tab2']\");
        if (tab) {
          tab.classList.add('disabled');
          tab.setAttribute('tabindex', '-1');
          tab.setAttribute('aria-disabled', 'true');
          tab.onclick = function(e) { e.preventDefault(); };
        }
      }, 500);
    "
    ))
  ),

  page_navbar(
    navset_tab(
      id = "nav",
      nav_panel("Tab 1", value = "tab1", "This is tab 1"),
      nav_panel("Tab 2", value = "tab2", "This is tab 2 (should be disabled)")
    )
  )
)

server <- function(input, output, session) {
}

shinyApp(ui, server)

[gadenbuie]

Yeah, you'll definitely need to use JavaScript (or maybe you could use shinyjs), and this approach seems generally feasible. I'd urge you to spend some time reading about the accessibility of this approach, though.

I'd recommend considering using a tooltip() or even not disabling the tab and putting text in the tab contents telling people that the section of the app is under construction.

As it is now, it might be hard to tell the difference between a disabled tab and a non-active tab, and the interface doesn't give any hints as to why the tab is disabled.

[fzenoni]

Thanks for the suggestion, it is very valuable. I will definitely adjust my UI accordingly.