[Bug]: Items inside header and sidebar of {shinydashboard} are not translated with {shiny.i18n}

[KHwong12]

Cross-posted from StackOverflow (https://stackoverflow.com/questions/73509710/items-inside-header-and-sidebar-of-shinydashboard-are-not-translated-with-shi).

Guidelines

• I agree to follow this project's Contributing Guidelines.

Project Version

0.2.0

Platform and OS Version

macOS 12.3.1, R 4.2.1, RStudio 2022.07.1

Existing Issues

No response

What happened?

When using {shiny.i18n} for live language translations in an {shinydashboard} app, the contents inside dashboardHeader() and dashboardSidebar() are not translated. Contents inside dashboardBody() are translated though.

Steps to reproduce

In the sample app below, the title of the Dashboard ("Basic dashboard") and the two menu items ("Dashboard Tab" and "Widgets Tab") are all wrapped in the i18n$t() function, with traditional Chinese translation (zh) provided in translation_zh.csv.

1. Run the sample application below with shiny::runApp()
2. Click on the "change language" dropdown list created from shiny.i18n::usei18n(i18n)
3. Change the language from en to zh

Expected behavior

When the user changes the language from en to zh, the text of the menu items and dashboard title do not change. Meanwhile, other items inside dashboardBody() (e.g. "Number of observations:") are successfully translated.

The title (i18n$t("Basic dashboard")) and menu items (i18n$t("Dashboard Tab") and i18n$t("Widgets Tab")) will change from English to the respective traditional Chinese language word after changing the language.

Attachments

The app code is merged from the sample app of {shinydashboard} and sample app of {shiny.i18n}.

app.R

library(shiny)
library(shinydashboard)
library(shiny.i18n)

# File with translations
i18n <- Translator$new(translation_csvs_path = "data/")
i18n$set_translation_language("en") # here you select the default translation to display

ui <- dashboardPage(
  dashboardHeader(title = i18n$t("Basic dashboard")),
  dashboardSidebar(
    sidebarMenu(
      menuItem(i18n$t("Dashboard Tab"), tabName = "dashboard", icon = icon("dashboard")),
      menuItem(i18n$t("Widgets Tab"), tabName = "widgets", icon = icon("th"))
    )
  ),
  ## Body content
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",

              shiny.i18n::usei18n(i18n),
              div(style = "float: right;",
                  selectInput('selected_language',
                              i18n$t("Change language"),
                              choices = i18n$get_languages(),
                              selected = i18n$get_key_translation())
              ),

              fluidRow(
                box(plotOutput("plot1", height = 250)),

                box(
                  title = i18n$t("Controls"),
                  sliderInput("slider", i18n$t("Number of observations:"), 1, 100, 50)
                )
              )
      ),

      # Second tab content
      tabItem(tabName = "widgets",
              h2(i18n$t("Widgets tab content"))
      )
    )
  )
)

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

  observeEvent(input$selected_language, {
    # This print is just for demonstration
    print(paste("Language change!", input$selected_language))
    # Here is where we update language in session
    shiny.i18n::update_lang(session, input$selected_language)
  })

  set.seed(122)
  histdata <- rnorm(500)

  output$plot1 <- renderPlot({
    data <- histdata[seq_len(input$slider)]
    hist(data)
  })
}

shinyApp(ui, server)

data/translation_zh.csv

en,zh
Widgets tab content,內容
Change language,更換語言
Controls,控制台
Number of observations:,觀察數量
Basic dashboard,基本儀表版
Dashboard Tab,儀表版
Widgets Tab,部件

Screenshots or Videos

Default view

After selecting zh as the language

Screen recording

Additional Information

I am also not sure if this issue should be posted here or on the repo of {shinydashboard}. Feel free to close this issue if this issue is related to {shinydashboard} instead of {shiny.i18n}.

[KHwong12]

I also noticed that the texts that could be translated are span HTML elements with the class of i18n. The title and menu items texts, meanwhile, do not have a i18n class.

HTML text element in body

HTML text element in title and sidebar

[KHwong12]

Issue solved with this StackOverflow answer.

The use_js method for the translator class (i18n) should be called before any call to the translate method.