Shiny app disconnect message not accessible by screen readers

I've been using Shiny to create apps for work for a while. Very grateful for the creators and the community in general!

Recently at I'm trying to fix all of our accessibility issues. And I'm stuck on making the disconnect message readable by a screen-reader (NVDA etc.). I found the css to change the disconnect message (shiny-disconnected-overlay) but have no idea how to add aria-label or other stuff to make it readable.

I have also try packages that change the disconnect message (shinydisconnect, sever etc.) but neither is readable by a screen-reader.

Any help will be much appreciated!

Below is a minimal reproducible example:

library(shiny)
# Define UI ----
ui <- fluidPage(
  
  tags$head(tags$style(type="text/css",
                       "#shiny-disconnected-overlay:before {
    content: 'Testing. Your session has timed out.';
    text-align: center;
    font-size: 50pt;
    background-color: white;
    padding: 5%;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);}")),
  
  actionButton("disconnect", "Disconnect the app")
  
)

server <- function(input, output, session) {
  observeEvent(input$disconnect, {
    session$close()
  })
}

shinyApp(ui, server)

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.