chore: Sync the vendored UI with upstream antora-ui-default, part 2: JS and a11y ports

ui/src/css/header.css

@@ -3,8 +3,10 @@
  * It also handles the mobile version of the menu.
  */
 
-html.is-clipped--navbar {
-  overflow-y: hidden;
+@media screen and (max-width: 1023.5px) {
+  html.is-clipped--navbar {
+    overflow-y: hidden;
+  }
 }
 
 body {

ui/src/css/nav.css

@@ -8,6 +8,12 @@
  * of the sidebar menu needs to be adjusted.
  */
 
+@media screen and (max-width: 1023.5px) {
+  html.is-clipped--nav {
+    overflow-y: hidden;
+  }
+}
+
 .nav-container {
   position: fixed;
   top: var(--body-top);
@@ -71,10 +77,6 @@
   height: inherit;
 }
 
-html.is-clipped--nav {
-  overflow-y: hidden;
-}
-
 .nav-panel-menu {
   overflow-y: scroll;
   overscroll-behavior: none;
@@ -108,6 +110,29 @@ html.is-clipped--nav {
   color: var(--nav-font-color);
 }
 
+.nav-menu-toggle {
+  background: transparent url(../img/octicons-16.svg#view-unfold) no-repeat center / 100% 100%;
+  border: none;
+  float: right;
+  height: 1em;
+  margin-right: -0.5rem;
+  opacity: 0.75;
+  outline: none;
+  padding: 0;
+  position: sticky;
+  top: calc((var(--nav-line-height) - 1 + 0.5) * 1rem);
+  visibility: hidden;
+  width: 1em;
+}
+
+.nav-menu-toggle.is-active {
+  background-image: url(../img/octicons-16.svg#view-fold);
+}
+
+.nav-panel-menu.is-active:hover .nav-menu-toggle {
+  visibility: visible;
+}
+
 .nav-menu h3.title {
   color: var(--nav-heading-font-color);
   font-size: inherit;

ui/src/js/01-nav.js

@@ -4,16 +4,17 @@
   var SECT_CLASS_RX = /^sect(\d)$/
 
   var navContainer = document.querySelector('.nav-container')
-  if (!navContainer) return
   var navToggle = document.querySelector('.nav-toggle')
+  if (!navContainer && (!navToggle || (navToggle.hidden = true))) return
+  var nav = navContainer.querySelector('.nav')
+  var navMenuToggle = navContainer.querySelector('.nav-menu-toggle')
 
   navToggle.addEventListener('click', showNav)
   navContainer.addEventListener('click', trapEvent)
 
   var menuPanel = navContainer.querySelector('[data-panel=menu]')
   if (!menuPanel) return
   var explorePanel = navContainer.querySelector('[data-panel=explore]')
-  var nav = navContainer.querySelector('.nav')
 
   var currentPageItem = menuPanel.querySelector('.is-current-page')
   var originalPageItem = currentPageItem
@@ -34,6 +35,22 @@
     }
   })
 
+  if (navMenuToggle && menuPanel.querySelector('.nav-item-toggle')) {
+    navMenuToggle.style.display = ''
+    navMenuToggle.addEventListener('click', function () {
+      var collapse = !this.classList.toggle('is-active')
+      find(menuPanel, '.nav-item > .nav-item-toggle').forEach(function (btn) {
+        collapse ? btn.parentElement.classList.remove('is-active') : btn.parentElement.classList.add('is-active')
+      })
+      if (currentPageItem) {
+        if (collapse) activateCurrentPath(currentPageItem)
+        scrollItemToMidpoint(menuPanel, currentPageItem.querySelector('.nav-link'))
+      } else {
+        menuPanel.scrollTop = 0
+      }
+    })
+  }
+
   if (explorePanel) {
     explorePanel.querySelector('.context').addEventListener('click', function () {
       // NOTE logic assumes there are only two panels

ui/src/js/02-on-this-page.js

@@ -9,6 +9,7 @@
 
   var articleSelector = 'article.doc'
   var article = document.querySelector(articleSelector)
+  if (!article) return
   var headingsSelector = []
   for (var level = 0; level <= levels; level++) {
     var headingSelector = [articleSelector]

ui/src/js/03-fragment-jumper.js

@@ -2,6 +2,7 @@
   'use strict'
 
   var article = document.querySelector('article.doc')
+  if (!article) return
   var toolbar = document.querySelector('.toolbar')
   var supportsScrollToOptions = 'scrollTo' in document.documentElement
 
@@ -19,7 +20,7 @@
       window.location.hash = '#' + this.id
       e.preventDefault()
     }
-    var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom
+    var y = computePosition(this, 0) - (toolbar ? toolbar.getBoundingClientRect().bottom : 0)
     var instant = e === false && supportsScrollToOptions
     instant ? window.scrollTo({ left: 0, top: y, behavior: 'instant' }) : window.scrollTo(0, y)
   }

ui/src/js/05-mobile-navbar.js

@@ -8,8 +8,8 @@
   function toggleNavbarMenu (e) {
     e.stopPropagation() // trap event
     document.documentElement.classList.toggle('is-clipped--navbar')
-    this.classList.toggle('is-active')
-    var menu = document.getElementById(this.dataset.target)
+    navbarBurger.setAttribute('aria-expanded', this.classList.toggle('is-active'))
+    var menu = document.getElementById(this.getAttribute('aria-controls') || this.dataset.target)
     menu.classList.toggle('is-active')
   }
 })()

ui/src/js/06-copy-to-clipboard.js

@@ -4,7 +4,11 @@
   var CMD_RX = /^\$ (\S[^\\\n]*(\\\n(?!\$ )[^\\\n]*)*)(?=\n|$)/gm
   var LINE_CONTINUATION_RX = /( ) *\\\n *|\\\n( ?) */g
   var TRAILING_SPACE_RX = / +$/gm
+
   var config = (document.getElementById('site-script') || { dataset: {} }).dataset
+  var supportsCopy = window.navigator.clipboard
+  var svgAs = config.svgAs
+  var uiRootPath = (config.uiRootPath == null ? window.uiRootPath : config.uiRootPath) || '.'
 
   ;[].slice.call(document.querySelectorAll('.doc pre.highlight, .doc .literalblock pre')).forEach(function (pre) {
     var code, language, lang, copy, toast, toolbox
@@ -28,19 +32,19 @@
     }
     ;(toolbox = document.createElement('div')).className = 'source-toolbox'
     if (lang) toolbox.appendChild(lang)
-    if (window.navigator.clipboard) {
+    if (supportsCopy) {
       ;(copy = document.createElement('button')).className = 'copy-button'
       copy.setAttribute('title', 'Copy to clipboard')
-      if (config.svgAs === 'svg') {
+      if (svgAs === 'svg') {
         var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
         svg.setAttribute('class', 'copy-icon')
         var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-        use.setAttribute('href', window.uiRootPath + '/img/octicons-16.svg#icon-clippy')
+        use.setAttribute('href', uiRootPath + '/img/octicons-16.svg#icon-clippy')
         svg.appendChild(use)
         copy.appendChild(svg)
       } else {
         var img = document.createElement('img')
-        img.src = window.uiRootPath + '/img/octicons-16.svg#view-clippy'
+        img.src = uiRootPath + '/img/octicons-16.svg#view-clippy'
         img.alt = 'copy icon'
         img.className = 'copy-icon'
         copy.appendChild(img)

ui/src/js/vendor/highlight.bundle.js

@@ -43,6 +43,6 @@ hljs.registerLanguage('xml', xml)
 hljs.registerLanguage('yaml', yaml)
 hljs.registerLanguage('toml', ini)
 
-for (const node of document.querySelectorAll('pre code.hljs')) {
+for (const node of document.querySelectorAll('pre code.hljs[data-lang]')) {
   hljs.highlightElement(node)
 }

ui/src/partials/edit-this-page.hbs

@@ -0,0 +1,5 @@
+{{#if (and page.fileUri (not env.CI))}}
+<div class="edit-this-page"><a href="{{page.fileUri}}">Edit this Page</a></div>
+{{else if (and page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private)))}}
+<div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>
+{{/if}}

ui/src/partials/footer-scripts.hbs

@@ -1,4 +1,4 @@
-<script src="{{{uiRootPath}}}/js/site.js"></script>
+<script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/tabs.js" data-sync-storage-key="preferred-tab"></script>
 <script>

ui/src/partials/head-scripts.hbs

@@ -21,4 +21,6 @@
     </script>
     -->
     {{/with}}
+    {{!--
     <script>var uiRootPath = '{{{uiRootPath}}}'</script>
+    --}}

ui/src/partials/header.hbs

@@ -27,7 +27,7 @@
       {{/navbar}}
     </div>
     <div id="topbar-right" class="navbar-end">
-      <button class="navbar-burger" data-target="popup-menu">
+      <button class="navbar-burger" aria-controls="popup-menu" aria-expanded="false" aria-label="Toggle main menu">
         <span></span>
         <span></span>
         <span></span>

ui/src/partials/nav-menu.hbs

@@ -1,6 +1,7 @@
 {{#with page.navigation}}
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu">
+    <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button>
     <div class="title-wrapper">
       {{#with @root.page.componentVersion}}
       <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>

ui/src/partials/pagination.hbs

@@ -1,12 +1,16 @@
 {{#unless (eq page.attributes.pagination undefined)}}
 {{#if (or page.previous page.next)}}
 <nav class="pagination" data-pagefind-ignore>
+  {{#if (ne page.attributes.pagination 'next')}}
   {{#with page.previous}}
   <span class="prev"><a href="{{{relativize ./url}}}">{{{./content}}}</a></span>
   {{/with}}
+  {{/if}}
+  {{#if (ne page.attributes.pagination 'prev')}}
   {{#with page.next}}
   <span class="next"><a href="{{{relativize ./url}}}">{{{./content}}}</a></span>
   {{/with}}
+  {{/if}}
 </nav>
 {{/if}}
 {{/unless}}

ui/src/partials/toolbar.hbs

@@ -4,9 +4,5 @@
   <a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>
   {{/with}}
 {{> breadcrumbs}}
-  {{#if (and page.fileUri (not env.CI))}}
-  <div class="edit-this-page"><a href="{{page.fileUri}}">Edit this Page</a></div>
-  {{else if (and page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private)))}}
-  <div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>
-  {{/if}}
+{{> edit-this-page}}
 </div>