Report icons that lack aria-label (#2550)

Fixes #2533

NEWS.md

@@ -1,5 +1,6 @@
 # pkgdown (development version)
 
+* Custom navbars that specify `icon` but not `aria-label` will now generate a message reminding you to provide one for to improve accessibility (#2533).
 * `init_site()` will no longer automatically build favicons on CI systems (e.g. GHA). This is an expensive operation that uses an external service so it should only be run locally (#2553).
 * `build_home_index()` now reports when rendering the home page (#2544).
 * Bootstrap 3 has been deprecated. It was superseded in December 2021, and now we're starting to more directly encourage folks to move away from it.

R/navbar-menu.R

@@ -197,6 +197,18 @@ navbar_html_text <- function(x) {
     iconset <- purrr::map_chr(strsplit(icon_classes, "-"), 1)
 
     icon <- html_tag("span", class = unique(c(iconset, classes)))
+
+    if (is.null(x$`aria-label`)) {
+      cli::cli_inform(
+        c(
+          x = "Icon {.str {x$icon}} lacks an {.var aria-label}.",
+          i = "Specify {.var aria-label} to make the icon accessible to screen readers.",
+          i = "Learn more in {.vignette accessibility}."
+        ),
+        .frequency = "regularly",
+        .frequency_id = "icon-aria-label"
+      )
+    }
   }
 
   paste0(

tests/testthat/_snaps/navbar-menu.md

@@ -45,6 +45,16 @@
     Output
       <li class="nav-item"><a class="nav-link" href="https://example.com">Hi</a></li>
 
+# icons warn if no aria-label
+
+    Code
+      . <- navbar_html(menu_icon("fa-question", "https://example.com", NULL))
+    Message
+      x Icon "fa-question" lacks an `aria-label`.
+      i Specify `aria-label` to make the icon accessible to screen readers.
+      i Learn more in `vignette(accessibility)`.
+      This message is displayed once every 8 hours.
+
 # simple components don't change without warning
 
     Code

tests/testthat/test-navbar-menu.R

@@ -44,6 +44,14 @@ test_that("bullet class varies based on depth", {
   )
 })
 
+test_that("icons warn if no aria-label", {
+  reset_message_verbosity("icon-aria-label")
+
+  expect_snapshot({
+    . <- navbar_html(menu_icon("fa-question", "https://example.com", NULL))
+  })
+})
+
 test_that("icons extract base iconset class automatically", {
   expect_match(
     navbar_html(menu_icon("fa-question", "https://example.com", "label")),
@@ -80,11 +88,11 @@ test_that("simple components don't change without warning", {
 test_that("navbar_html_text() combines icons and text", {
   expect_equal(navbar_html_text(list(text = "a")), 'a')
   expect_equal(
-    navbar_html_text(list(icon = "fas-github")),
+    navbar_html_text(list(icon = "fas-github", `aria-label` = "github")),
     '<span class="fas fas-github"></span>'
   )
   expect_equal(
-    navbar_html_text(list(text = "a", icon = "fas-github")),
+    navbar_html_text(list(text = "a", icon = "fas-github", `aria-label` = "github")),
     '<span class="fas fas-github"></span> a'
   )
 })