Fix hidden external link text warning so it can be read by screen rea…

…ders (#56)

* Unignore www folder

* Update external link to use sr-only class and CSS

* Increment version number to 0.4.3

* Don't forget the test dashboard...

.gitignore

@@ -6,4 +6,3 @@ google-analytics.html
 tests/testthat/google-analytics.html
 docs
 inst/doc
-www

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: dfeshiny
 Title: DfE R Shiny Standards
-Version: 0.4.2
+Version: 0.4.3
 Authors@R: c(
     person("Rich", "Bielby", , "[email protected]", role = c("aut", "cre"),
            comment = c(ORCID = "0000-0001-9070-9969")),

NEWS.md

@@ -1,6 +1,11 @@
+# dfeshiny 0.4.3
+
+* Fix bug in `external_link()` hidden warning so that it can be read by
+screen readers.
+
 # dfeshiny 0.4.2
 
-* Applied use of `external_link()` to `support_panel()`
+* Applied use of `external_link()` to `support_panel()`.
 
 # dfeshiny 0.4.1
 

R/external_link.R

@@ -155,24 +155,24 @@ external_link <- function(href, link_text, add_warning = TRUE) {
     hidden_span <- NULL # don't have extra hidden text if clear in main text
   } else {
     hidden_span <-
-      htmltools::span(class = "visually-hidden", "This link opens in a new tab")
+      htmltools::span(class = "sr-only", " (opens in new tab)")
   }
 
   # Create the link object
   link <- htmltools::tags$a(
     href = href,
-    htmltools::HTML(paste0(hidden_span, link_text)), # white space hack
+    htmltools::HTML(paste0(link_text, hidden_span)), # white space hack
     target = "_blank",
     rel = "noopener noreferrer",
     .noWS = c("outside")
   )
 
   # Attach CSS from inst/www/css/visually-hidden.css
   dependency <- htmltools::htmlDependency(
-    name = "visually-hidden",
+    name = "sr-only",
     version = as.character(utils::packageVersion("dfeshiny")[[1]]),
     src = c(href = "dfeshiny/css"),
-    stylesheet = "visually-hidden.css"
+    stylesheet = "sr-only.css"
   )
 
   # Return the link with the CSS attached

inst/www/css/sr-only.css

@@ -0,0 +1,9 @@
+/* Taken from https://webaim.org/techniques/css/invisiblecontent/#:~:text=display%3Anone%20or%20visibility%3A%20hidden,is%20ignored%20by%20screen%20readers. */
+.sr-only {
+  position:absolute;
+  left:-10000px;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+}

tests/test_dashboard/tests/testthat/test-UI-03-external_link.R

@@ -1,5 +1,3 @@
-# To run the diffviewer on these tests, you need to add the path:
-# Doesn't work? testthat::snapshot_review('UI-03-external_link/', path='tests/test_dashboard/')
 app <- AppDriver$new(
   name = "external_link",
   expect_values_screenshot_args = FALSE
@@ -25,8 +23,8 @@ test_that("Link text appears with hidden warning", {
   expect_gt(
     grep(
       paste0(
-        "Sometimes you just want to be writing This link opens in a new tabR",
-        " Shiny code in a cave without distractions."
+        "Sometimes you just want to be writing R Shiny (opens in new tab)",
+        " code in a cave without distractions."
       ),
       all_text,
       fixed = TRUE
@@ -49,7 +47,7 @@ test_that("Link text doesn't have excess whitespace", {
 
   expect_gt(
     grep(
-      "when writing code in This link opens in a new tabR Shiny.",
+      "when writing code in R Shiny (opens in new tab).",
       all_text,
       fixed = TRUE
     ) |>
@@ -74,8 +72,8 @@ test_that("Inspect HTML is as expected", {
   expect_gt(
     grep(
       paste0(
-        "rel=\"noopener noreferrer\"><span class=\"visually-hidden\">",
-        "This link opens in a new tab</span>R Shiny</a>"
+        "<a href=\"https://shiny.posit.co/\" target=\"_blank\" rel=\"noopener no",
+        "referrer\">R Shiny<span class=\"sr-only\"> (opens in new tab)</span></a>"
       ),
       all_links_html,
       fixed = TRUE

tests/testthat/test-external_link.R

@@ -21,7 +21,7 @@ test_that("attributes are attached properly", {
 })
 
 test_that("hidden text is skipped", {
-  expect_false(grepl("^This link opens in a new tab", test_link$children[[1]]))
+  expect_false(grepl("<span class=\"sr-only\">", test_link$children[[1]]))
 })
 
 # Rest of tests against the function ==========================================
@@ -52,7 +52,7 @@ test_that("New tab warning always stays for non-visual users", {
 
   expect_equal(
     paste0(test_link_hidden$children[[1]]),
-    '<span class="visually-hidden">This link opens in a new tab</span>R Shiny'
+    'R Shiny<span class="sr-only"> (opens in new tab)</span>'
   )
 })
 
@@ -77,23 +77,23 @@ test_that("Surrounding whitespace shrubbery is trimmed", {
       "https://shiny.posit.co/", "   R Shiny",
       add_warning = FALSE
     )$children[[1]]),
-    '<span class="visually-hidden">This link opens in a new tab</span>R Shiny'
+    'R Shiny<span class="sr-only"> (opens in new tab)</span>'
   )
 
   expect_equal(
     paste0(external_link(
       "https://shiny.posit.co/", "R Shiny    ",
       add_warning = FALSE
     )$children[[1]]),
-    '<span class="visually-hidden">This link opens in a new tab</span>R Shiny'
+    'R Shiny<span class="sr-only"> (opens in new tab)</span>'
   )
 
   expect_equal(
     paste0(external_link(
       "https://shiny.posit.co/", "   R Shiny     ",
       add_warning = FALSE
     )$children[[1]]),
-    '<span class="visually-hidden">This link opens in a new tab</span>R Shiny'
+    'R Shiny<span class="sr-only"> (opens in new tab)</span>'
   )
 })