`
-}
-
-document.addEventListener('DOMContentLoaded', () => {
- const switcher = document.querySelector('.navbar [href$="#dark-mode"]')
- if (!switcher) return
-
- switcher.parentElement.classList.add('dropdown')
- switcher.parentElement.innerHTML = colorPickerMarkup()
- bsSetupThemeToggle()
-})
diff --git a/vignettes/any-project/index.Rmd b/vignettes/any-project/index.Rmd
index 2748d7995..6f020fadf 100644
--- a/vignettes/any-project/index.Rmd
+++ b/vignettes/any-project/index.Rmd
@@ -139,6 +139,7 @@ output:
::: col-md-6
```{r, echo = FALSE}
+#| fig.alt: RStudio "New Template" dialog showing three theming-related templates from bslib.
knitr::include_graphics("rstudio-templates.png")
```
:::
diff --git a/vignettes/cards/index.Rmd b/vignettes/cards/index.Rmd
index df6f64d2d..0bb3911ca 100644
--- a/vignettes/cards/index.Rmd
+++ b/vignettes/cards/index.Rmd
@@ -375,6 +375,7 @@ card(
full_screen = TRUE,
card_image(
file = "shiny-hex.svg",
+ alt = "Shiny's hex sticker",
href = "https://github.com/rstudio/shiny"
),
card_body(
diff --git a/vignettes/custom-components/index.Rmd b/vignettes/custom-components/index.Rmd
index 04e57baa0..3258426f2 100644
--- a/vignettes/custom-components/index.Rmd
+++ b/vignettes/custom-components/index.Rmd
@@ -64,6 +64,7 @@ shinyApp(ui, function(input, output) {})
```
```{r, echo = FALSE, out.width="67%"}
+#| fig.alt: Two custom person components, one each for Andrew Carnegie and John D. Rockefeller.
knitr::include_graphics("person.png")
```
diff --git a/vignettes/theming/index.Rmd b/vignettes/theming/index.Rmd
index eb531d3cf..6dcf25388 100644
--- a/vignettes/theming/index.Rmd
+++ b/vignettes/theming/index.Rmd
@@ -82,6 +82,7 @@ knitr::include_graphics("themer.gif")
When running the theming widget locally, you'll see output like this in your R console (in R Markdown, you'll see YAML output instead of R code) to reproduce the theming changes:
```{r, echo = FALSE, out.width="80%"}
+#| fig.alt: Console output showing the R code to reproduce the theming changes.
knitr::include_graphics("themer-code.png")
```
@@ -108,6 +109,7 @@ output:
```{r, echo = FALSE}
+#| fig.alt: A screenshot of the minty Bootswatch theme.
knitr::include_graphics("bootswatch.png")
```
@@ -153,6 +155,7 @@ output:
:::
```{r, echo = FALSE}
+#| fig.alt: A screenshot showing a dark mode theme with custom fonts.
knitr::include_graphics("custom-dark-mode.png")
```
@@ -199,6 +202,7 @@ output:
```{r, echo = FALSE, out.width="67%"}
+#| fig.alt: A progress bar indicator colored orange.
knitr::include_graphics("progress-orange.png")
```
@@ -275,6 +279,7 @@ bs_theme(
```
```{r, echo = FALSE}
+#| fig.alt: A screenshot showing a Shiny app with a video game style thanks to NES.css.
knitr::include_graphics("nes.png")
```
@@ -342,6 +347,7 @@ shinyApp(ui, server)
```
```{r, echo = FALSE, out.width="50%"}
+#| fig.alt: An animation showing a dark mode switch in a Shiny app toggling on and off.
knitr::include_graphics("dark-mode.gif")
```
diff --git a/vignettes/utility-classes/index.Rmd b/vignettes/utility-classes/index.Rmd
index ead697d6a..cf6e689e2 100644
--- a/vignettes/utility-classes/index.Rmd
+++ b/vignettes/utility-classes/index.Rmd
@@ -30,6 +30,7 @@ tabsetPanel(
```
```{r, echo = FALSE, out.width="67%"}
+#| fig.alt: A tabset panel without padding or borders, showing plain text placed directly against the tab's bottom border.
knitr::include_graphics("tab-before.png")
```
@@ -46,6 +47,7 @@ tabsetPanel(
```
```{r, echo = FALSE, out.width="67%"}
+#| fig.alt: A tabset panel with padding and borders, showing a border around the tab content and padding between the tab content and the tab's border.
knitr::include_graphics("tab-after.png")
```
@@ -63,16 +65,19 @@ tabsetPanel(
```
```{r, echo = FALSE, out.width="67%"}
+#| fig.alt: Tabs using a pills style where the tab controls look like buttons.
knitr::include_graphics("pills.png")
```
It's also worth noting that you can also add these classes to [rmarkdown tabsets](https://bookdown.org/yihui/rmarkdown-cookbook/html-tabs.html), like so:
```{r, echo = FALSE, out.width="50%"}
+#| fig.alt: Source code for an rmarkdown tabset, see the previous link for the code.
knitr::include_graphics("rmarkdown-tabs-source.png")
```
```{r, echo = FALSE}
+#| fig.alt: Screenshot of a rendered rmarkdown tabset.
knitr::include_graphics("rmarkdown-tabs.png")
```
@@ -91,6 +96,7 @@ fluidPage(
```
```{r, echo = FALSE, out.width="67%"}
+#| fig.alt: Tabs using a pills style where the tab controls look like buttons and are horizontally centered.
knitr::include_graphics("pills.png")
```
@@ -122,6 +128,7 @@ shinyApp(
```
```{r, echo = FALSE, out.width="67%"}
+#| fig.alt: A card component with an orage header and a table of the mtcars dataset in the card body.
knitr::include_graphics("DT-card.png")
```
@@ -134,5 +141,6 @@ bs_theme("theme-colors" = "('flair': orange)")
```
```{r, echo = FALSE, out.width="67%"}
+#| fig.alt: A card component with an orange header and a table of the mtcars dataset in the card body.
knitr::include_graphics("DT-card-custom.png")
```