From 31b5d70330c2b0438b6f210b72323ec8addc9883 Mon Sep 17 00:00:00 2001
From: Hadley Wickham <h.wickham@gmail.com>
Date: Thu, 9 May 2024 08:28:53 -0500
Subject: [PATCH] Improve HTML5 compliance

Fixes #2369
---
 NEWS.md                                       |  4 +++
 R/navbar.R                                    | 30 ++++++++-----------
 R/render.R                                    |  3 ++
 inst/BS5/templates/content-article-index.html |  2 +-
 inst/BS5/templates/content-article.html       |  2 +-
 inst/BS5/templates/content-authors.html       |  2 +-
 .../templates/content-citation-authors.html   |  2 +-
 inst/BS5/templates/content-news-index.html    |  2 +-
 inst/BS5/templates/content-news.html          |  2 +-
 .../templates/content-reference-index.html    |  4 +--
 .../templates/content-reference-topic.html    |  2 +-
 inst/BS5/templates/content-title-body.html    |  2 +-
 .../BS5/templates/content-tutorial-index.html |  2 +-
 inst/BS5/templates/content-tutorial.html      |  2 +-
 inst/BS5/templates/head.html                  |  5 ----
 inst/BS5/templates/navbar.html                |  2 +-
 16 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/NEWS.md b/NEWS.md
index a1c6cc2aa..00016ba48 100644
--- 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_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).
diff --git a/R/navbar.R b/R/navbar.R
index cdb44f1f9..861d7da39 100644
--- a/R/navbar.R
+++ b/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 ---------------------------------------------------------
diff --git a/R/render.R b/R/render.R
index 9ec9c95e4..319a0c14e 100644
--- 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")
 }
 
diff --git a/inst/BS5/templates/content-article-index.html b/inst/BS5/templates/content-article-index.html
index 7b3df019e..a4dc5e58d 100644
--- 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="Table of contents">
       <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
index 8a5c79b61..a3a395c49 100644
--- 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="Table of contents">
       <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
index f4bfabf82..6e4eaf4c9 100644
--- 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="Table of contents">
       <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
index 805d86924..deb85d795 100644
--- 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="Table of contents">
       <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
index 1cc580fde..af28ad692 100644
--- 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="Table of contents">
       <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
index 5bd56acfa..fadbc460a 100644
--- 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="Table of contents">
       <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
index b1d3d0c9d..25d441016 100644
--- 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="Table of contents">
       <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
index 7974ae50c..83c699455 100644
--- 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="Table of contents">
       <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
index d5bb0adac..f3963cbfe 100644
--- 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="Table of contents">
       <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
index 97336070d..bbaedb9f7 100644
--- 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="Table of contents">
       <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
index 9a2d91131..8044e60a2 100644
--- 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="Table of contents">
       <h2>{{#translate}}{{on_this_page}}{{/translate}}</h2>
     </nav>
   </aside>
diff --git a/inst/BS5/templates/head.html b/inst/BS5/templates/head.html
index e663b6f93..183609b52 100644
--- 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
index b8a50fd61..d9f605b09 100644
--- 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="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>