Improve HTML5 compliance (r-lib#2523)

hadley · SebKrantz · commit 3aca9c0fef12 · 2024-06-01T10:09:43.000+02:00
Fixes r-lib#2369
diff --git a/NEWS.md b/NEWS.md
@@ -1,5 +1,9 @@
 # pkgdown (development version)
 
+* Improve HTML5 compliance (#2369):
+  * No longer support IE9 or earlier
+  * Strip trailing whitespace
+  * Label `<nav>`s and improve navbar html.
 * `build_home_index()` now renders math if you use it in your home page (#2263).
 * `build_home()` now correctly escapes special HTML characters in the bibtex citation (#2022).
 * BS5 templates no longer include empty link to logo when none exists (#2536).
diff --git a/R/navbar.R b/R/navbar.R
@@ -274,13 +274,16 @@ bs4_navbar_links_tags <- function(links, depth = 0L, side = "left") {
       return(
         htmltools::tags$li(
           class = menu_class,
-          htmltools::tags$a(
-            href = "#", class = "nav-link dropdown-toggle",
-            `data-bs-toggle` = "dropdown", role = "button",
-            `aria-expanded` = "false", `aria-haspopup` = "true",
+          htmltools::tags$button(
+            href = "#",
+            class = "nav-link dropdown-toggle",
+            `data-bs-toggle` = "dropdown",
+            type = "button",
+            `aria-expanded` = "false",
+            `aria-haspopup` = "true",
             link_text,
             id = paste0("dropdown-", make_slug(link_text)),
-          "aria-label" = x$`aria-label` %||% NULL
+            "aria-label" = x$`aria-label` %||% NULL
           ),
           htmltools::tags$div(
             class = dropdown_class,
@@ -336,24 +339,21 @@ bs4_navbar_links_tags <- function(links, depth = 0L, side = "left") {
 
   tags <- purrr::map2(links, seq_along(links), tackle_link, is_submenu = is_submenu, depth = depth)
   htmltools::tagList(tags)
-
 }
 
 bs4_navbar_link_text <- function(x, ...) {
-
   if (!is.null(x$icon)) {
-    # find the iconset
-    split <- strsplit(x$icon, "-")
-    if (length(split[[1]]) > 1) {
-      iconset <- split[[1]][[1]]
-    }
-    else {
-      iconset <- ""
-    }
-    htmltools::tagList(htmltools::tags$span(class = paste(iconset, x$icon)), " ", x$text, ...)
-  }
-  else
+    # Find the icon set
+    classes <- strsplit(x$icon, " ")[[1]]
+    icon_classes <- classes[grepl("-", classes)]
+    iconset <- purrr::map_chr(strsplit(icon_classes, "-"), 1)
+    class <- paste0(unique(c(iconset, classes)), collapse = " ")
+
+    text <- paste0(if (!is.null(x$text)) " ", x$text)
+    htmltools::tagList(htmltools::tags$span(class = class), text, ...)
+  } else {
     htmltools::tagList(x$text, ...)
+  }
 }
 
 # Testing helpers ---------------------------------------------------------
diff --git a/R/render.R b/R/render.R
@@ -63,6 +63,9 @@ render_page_html <- function(pkg, name, data = list(), depth = 0L) {
   template <- find_template("layout", name, pkg = pkg)
   rendered <- render_template(template, components)
 
+  # Strip trailing whitespace
+  rendered <- gsub("\\s+\n", "\n", rendered, perl = TRUE)
+  
   xml2::read_html(rendered, encoding = "UTF-8")
 }
 
@@ -98,7 +101,9 @@ data_template <- function(pkg = ".", depth = 0L) {
     version = tr_("Version"),
     examples = tr_("Examples"),
     citation = tr_("Citation"),
-    author_details = tr_("Additional details")
+    author_details = tr_("Additional details"),
+    toc = tr_("Table of contents"),
+    site_nav = tr_("Site navigation")
   )
 
   # Components that mostly end up in the <head>
diff --git a/inst/BS5/templates/content-article-index.html b/inst/BS5/templates/content-article-index.html
@@ -21,7 +21,7 @@ <h3>{{{title}}}</h3>
   </main>
 
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-article.html b/inst/BS5/templates/content-article.html
@@ -48,7 +48,7 @@ <h4 data-toc-skip class="date">$date$</h4>
   </main>
  {{#toc}}
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-authors.html b/inst/BS5/templates/content-authors.html
@@ -20,7 +20,7 @@ <h1>{{{pagetitle}}}</h1>
   </main>
 
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-citation-authors.html b/inst/BS5/templates/content-citation-authors.html
@@ -38,7 +38,7 @@ <h2>{{#translate}}{{author_details}}{{/translate}}</h2>
   </main>
 
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-news-index.html b/inst/BS5/templates/content-news-index.html
@@ -12,7 +12,7 @@ <h1>{{{pagetitle}}}</h1>
   </main>
 
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-news.html b/inst/BS5/templates/content-news.html
@@ -12,7 +12,7 @@ <h1>{{{pagetitle}}}</h1>
   </main>
 
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-reference-index.html b/inst/BS5/templates/content-reference-index.html
@@ -5,7 +5,7 @@
       <h1>{{{pagetitle}}}</h1>
     </div>
 
-    {{#rows}}<div id="{{slug}}" class="section level2">
+    {{#rows}}<div {{#slug}}id="{{.}}"{{/slug}} class="section level2">
       {{#title}}<h2>{{{.}}}</h2>{{/title}}
       {{#subtitle}}<h3>{{{.}}}</h3>{{/subtitle}}
       {{#desc}}<div class="section-desc">{{{desc}}}</div>{{/desc}}
@@ -21,7 +21,7 @@ <h1>{{{pagetitle}}}</h1>
   </main>
 
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-reference-topic.html b/inst/BS5/templates/content-reference-topic.html
@@ -41,7 +41,7 @@ <h2>{{#translate}}{{examples}}{{/translate}}</h2>
     {{/examples}}
   </main>
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-title-body.html b/inst/BS5/templates/content-title-body.html
@@ -11,7 +11,7 @@ <h1>{{pagetitle}}</h1>
   </main>
 
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-tutorial-index.html b/inst/BS5/templates/content-tutorial-index.html
@@ -13,7 +13,7 @@ <h1>{{{pagetitle}}}</h1>
   </main>
 
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/content-tutorial.html b/inst/BS5/templates/content-tutorial.html
@@ -5,7 +5,7 @@ <h1>{{pagetitle}}</h1>
     </div>
   </main>
   <aside class="col-md-3">
-    <nav id="toc">
+    <nav id="toc" aria-label="{{#translate}}{{toc}}{{/translate}}">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/head.html b/inst/BS5/templates/head.html
@@ -84,11 +84,6 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script>
 
-<!--[if lt IE 9]>
-<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-<![endif]-->
-
 {{#yaml}}{{#ganalytics}}
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{.}}"></script>
diff --git a/inst/BS5/templates/navbar.html b/inst/BS5/templates/navbar.html
@@ -1,5 +1,5 @@
 {{#navbar}}
-<nav class="navbar fixed-top navbar-{{{type}}} navbar-expand-lg bg-{{{bg}}}" data-bs-theme="{{{type}}}">
+<nav class="navbar fixed-top navbar-{{{type}}} navbar-expand-lg bg-{{{bg}}}" data-bs-theme="{{{type}}}" aria-label="{{#translate}}{{site_nav}}{{/translate}}">
   <div class="container">
     {{#includes}}{{{before_title}}}{{/includes}}
     <a class="navbar-brand me-2" href="{{#site}}{{root}}{{/site}}index.html">{{#site}}{{title}}{{/site}}</a>
diff --git a/po/R-pkgdown.pot b/po/R-pkgdown.pot
diff --git a/tests/testthat/_snaps/navbar.md b/tests/testthat/_snaps/navbar.md
diff --git a/tests/testthat/_snaps/render.md b/tests/testthat/_snaps/render.md
diff --git a/tests/testthat/test-navbar.R b/tests/testthat/test-navbar.R
