Improve HTML5 compliance

Fixes #2369

Author: hadley

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_reference()` now supports `\Sexpr[results=verbatim]` (@bastistician, #2510).
 * `build_home()` no longer checks if the README is missing any images. This check is now performed in `build_site()`, after `build_articles()` so you can refer to images created by vignettes with warnings (#2194).
 * `build_home()` now includes the contents of `inst/AUTHORS` on the authors page (#2506).

R/navbar.R

@@ -272,13 +272,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,
@@ -334,24 +337,15 @@ 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
+    text <- paste0(if (!is.null(x$text)) " ", x$text)
+    htmltools::tagList(htmltools::tags$span(class = x$icon), text, ...)
+  } else {
     htmltools::tagList(x$text, ...)
+  }
 }
 
 # Testing helpers ---------------------------------------------------------

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")
 }
 

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>

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>

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="Site navigation">
   <div class="container">
     {{#includes}}{{{before_title}}}{{/includes}}
     <a class="navbar-brand me-2" href="{{#site}}{{root}}{{/site}}index.html">{{#site}}{{title}}{{/site}}</a>