feat(card_image): Add alt parameter

rstudio · Jun 12, 2024 · 3656364 · 3656364
1 parent e32a918
commit 3656364
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/R/card.R b/R/card.R
@@ -256,6 +256,14 @@ card_footer <- function(..., class = NULL) {
 #'   starting with `https://` or similar) will be base64 encoded and provided to
 #'   the `src` attribute of the `<img>`. Alternatively, you may directly set
 #'   the image `src`, in which case `file` is ignored.
+#' @param alt Alternate text for the image, used by screen readers and assistive
+#'   devices. Provide alt text with a description of the image for any images
+#'   with important content. If alt text is not provided, the image will be
+#'   considered to be decorative and will not be read or announced by screen
+#'   readers.
+#'
+#'   For more information, the Web Accessibility Initiative (WAI) has a
+#'   [helpful tutorial on alt text](https://www.w3.org/WAI/tutorials/images/).
 #' @param href An optional URL to link to when a user clicks on the image.
 #' @param border_radius Which side of the image should have rounded corners,
 #'   useful when `card_image()` is used as an image cap at the top or bottom of
@@ -279,6 +287,7 @@ card_footer <- function(..., class = NULL) {
 #' @export
 card_image <- function(
   file,
+  alt = "",
   ...,
   src = NULL,
   href = NULL,
@@ -305,6 +314,7 @@ card_image <- function(
 
   image <- tags$img(
     src = src,
+    alt = alt,
     class = "img-fluid",
     class = switch(
       border_radius,

diff --git a/man/card_body.Rd b/man/card_body.Rd
diff --git a/tests/testthat/_snaps/card.md b/tests/testthat/_snaps/card.md
@@ -5,7 +5,7 @@
         "image cap on top of card")))
     Output
       <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
-        <img class="img-fluid card-img-top" src="https://example.com/image.jpg"/>
+        <img alt="" class="img-fluid card-img-top" src="https://example.com/image.jpg"/>
         <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">image cap on top of card</div>
         <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
       </div>
@@ -18,7 +18,7 @@
     Output
       <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
         <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">image cap on bottom of card</div>
-        <img class="img-fluid card-img-bottom" src="https://example.com/image.jpg"/>
+        <img alt="" class="img-fluid card-img-bottom" src="https://example.com/image.jpg"/>
         <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
       </div>
 
@@ -30,7 +30,7 @@
     Output
       <div class="card bslib-card bslib-mb-spacing html-fill-item html-fill-container" data-bslib-card-init data-require-bs-caller="card()" data-require-bs-version="5">
         <div class="card-header">header</div>
-        <img src="https://example.com/image.jpg" class="img-fluid"/>
+        <img src="https://example.com/image.jpg" alt="" class="img-fluid"/>
         <div class="card-body bslib-gap-spacing html-fill-item html-fill-container" style="margin-top:auto;margin-bottom:auto;flex:1 1 auto;">image not a cap</div>
         <script data-bslib-card-init>bslib.Card.initializeAllCards();</script>
       </div>