Remove shaded background and border of indicators in shinydashboardPlus::carousel - r

Question

I'm using {shinydashboard} and {shinydashboardPlus} to display a carousel. When I click on the carousel indicators they are displayed with a shaded background and a blue border (this wasn't the case in an earlier version of shinydashboardPlus::carousel, I added the used package versions in the code below). I checked this in Firefox and EDGE Chromium. I want to remove both (box and border) and can't figure out how to tweek the CSS. I did already manage to hide the .carousel-caption, but after playing around some time with the DOM inspector, I've not managed to do the same for the small box around the carousel indicators.
My problem is to identify the class of the object that has the shaded background and the blue border as attributes. Once I figure that out, it should be easy to change it.
Any help appreciated.
# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3
shinyApp(ui = dashboardPage(
title = "Test",
header = dashboardHeader(),
sidebar = dashboardSidebar(disable = TRUE,
width = "0px",
collapsed = TRUE),
body = dashboardBody(
tags$head(
tags$style(HTML("
.carousel-caption {
display: none !important;
}
"))
),
carousel(
id = "mycarousel",
carouselItem(
caption = "Item 1",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
),
carouselItem(
caption = "Item 2",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
)
)
) # close dashboardBody
), # close dashboardPage
server = function(input, output) {}
)

Answer 1

This is due to the accessibility plugin from bootstrap that the shiny people decided to add in since 1.6. There was no problem before. This is annoying. I tried to ask them to have an option choose load or not to load this plugin on start, but they refused. You can read from this issue.
To fix your problems, I have added some CSS styles:
# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3
shinyApp(ui = dashboardPage(
title = "Test",
header = dashboardHeader(),
sidebar = dashboardSidebar(disable = TRUE,
width = "0px",
collapsed = TRUE),
body = dashboardBody(
tags$head(
tags$style(HTML("
.carousel-caption {
display: none !important;
}
a.carousel-control:focus {
outline: none;
/*change background-image to none if want to remove black bars on right*/
background-image: linear-gradient(to right, transparent 0px, rgba(0,0,0,0.5) 100%);;
box-shadow: none;
}
a.carousel-control.left:focus {
/*change background-image to none if want to remove black bars on left*/
background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
}
.carousel-tablist-highlight.focus {
outline: none;
background-color: transparent;
}
"))
),
carousel(
id = "mycarousel",
carouselItem(
caption = "Item 1",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
),
carouselItem(
caption = "Item 2",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
)
)
) # close dashboardBody
), # close dashboardPage
server = function(input, output) {}
)
The first rule was added by you. The second and third rules are to remove the ugly box when you click left and right bar, but I didn't remove the black shadows around. You can remove them following the instructions I leave as comments. The last rule is what you really want. Only leave the last one if you don't care about left and right bars.