Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Report icons that lack aria-label #2550

Merged
merged 3 commits into from
May 21, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions NEWS.md
Original file line number Diff line number Diff line change
@@ -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).
* 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.
* Improve HTML5 compliance (#2369):
* No longer support IE9 or earlier
Expand Down
11 changes: 11 additions & 0 deletions R/navbar-menu.R
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,17 @@ 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."
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

link to docs or explain what an aria label is? or link to the config file?

),
.frequency = "regularly",
.frequency_id = "icon-aria-label"
)
}
}

paste0(
Expand Down
9 changes: 9 additions & 0 deletions tests/testthat/_snaps/navbar-menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,15 @@
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.
This message is displayed once every 8 hours.

# simple components don't change without warning

Code
Expand Down
12 changes: 10 additions & 2 deletions tests/testthat/test-navbar-menu.R
Original file line number Diff line number Diff line change
Expand Up @@ -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")),
Expand Down Expand Up @@ -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'
)
})
Expand Down
Loading