andy-jdl · andy-jdl · Jan 7, 2026
diff --git a/packages/11ty/_includes/README.md b/packages/11ty/_includes/README.md
@@ -6,7 +6,7 @@ Use [Liquid](https://www.11ty.dev/docs/languages/liquid/) or [Nunjucks](https://
 
 ### `_includes/components`
 
-The `_include/components` implement _cross templating language_ includes, also refered to as "shortcode components" because they are registered as Eleventy shortcodes (see the [`components` plugin module](`blob/main/plugins/components/README.md`)) that can be used in multiple template languages.
+The `_include/components` implement _cross templating language_ includes, also referred to as "shortcode components" because they are registered as Eleventy shortcodes (see the [`components` plugin module](`blob/main/plugins/components/README.md`)) that can be used in multiple template languages.
 
 Use a shortcode component when rendering the include requires using JavaScript or NPM packages, complex conditional logic or data manipulation, including async data.
 

diff --git a/packages/11ty/_includes/components/abstract.js b/packages/11ty/_includes/components/abstract.js
@@ -8,6 +8,7 @@ export default function (eleventyConfig) {
   const markdownify = eleventyConfig.getFilter('markdownify')
   return function (params) {
     const { abstract } = params
+    if (!abstract) return ''
     return html`
       <section class="section quire-page__abstract">
         <div class="container">

diff --git a/packages/11ty/_includes/components/head-tags/jsonld.js b/packages/11ty/_includes/components/head-tags/jsonld.js
@@ -17,24 +17,23 @@ export default function (eleventyConfig) {
   return function ({ canonicalURL, page }) {
     const { abstract, contributor, cover, title } = page
     const pageContributors = contributor
-      ? contributor
-        .map((contributor, { id }) => {
-          contributor = id ? publication.contributor[id] : contributor
-          if (!contributor) return {}
-          const { full_name, first_name, last_name } = contributor
-          return {
-            type: 'Person',
-            name: full_name || `${first_name} ${last_name}`
-          }
-        })
+      ? contributor.map((entry) => {
+        const resolved = entry.id ? publication.contributor[entry.id] : entry
+        if (!resolved) return {}
+        const { full_name, first_name, last_name } = resolved
+        return {
+          '@type': 'Person',
+          name: full_name || `${first_name} ${last_name}`
+        }
+      })
       : []
 
     const publicationContributors = publication.contributor
       .filter((contributor) => contributor.type === 'primary')
       .map((contributor) => {
         const { full_name, first_name, last_name } = contributor
         return {
-          type: 'Person',
+          '@type': 'Person',
           name: full_name || `${first_name} ${last_name}`,
           jobTitle: contributor.title,
           affiliation: contributor.affiliation,
@@ -46,27 +45,27 @@ export default function (eleventyConfig) {
     const publicationDescription = publication.description.full || ''
 
     const Book = {
-      type: 'Book',
+      '@type': 'Book',
       name: publication.title,
       description: publicationDescription.replace(/\n/g, ' '),
       isbn: isbn && isbn.replace(/-/g, '')
     }
 
     const Periodical = {
-      type: 'PublicationIssue',
+      '@type': 'PublicationIssue',
       name: publication.title,
       description: publicationDescription.replace(/\n/g, ' '),
       issueNumber: publication.series_issue_number,
       isPartOf: {
-        type: 'Periodical',
+        '@type': 'Periodical',
         name: publication.title,
         issn: publication.identifier.issn
       }
     }
 
     // publication.pub_type === null
     const WebSite = {
-      type: 'WebSite',
+      '@type': 'WebSite',
       name: publication.title
     }
 
@@ -90,17 +89,17 @@ export default function (eleventyConfig) {
           '/ulan/': 'Person'
         }
         return {
-          type: vocab[identifier] || 'Thing',
+          '@type': vocab[identifier] || 'Thing',
           name,
-          identifier
+          sameAs: identifier
         }
       })
 
     const publisher = {
-      type: 'Organization',
+      '@type': 'Organization',
       name: publication.publisher.name,
       location: {
-        type: 'PostalAddress',
+        '@type': 'PostalAddress',
         addressLocality: publication.publisher.location
       },
       identifier: publication.publisher.url
@@ -111,14 +110,14 @@ export default function (eleventyConfig) {
       author: [...pageContributors],
       description: abstract && abstract.replace(/\n/g, ' '),
       headline: title,
-      image: cover && path.join(imageDir, cover),
+      image: cover && new URL(path.join(imageDir, cover), publication.url).href,
       partOf: {
         ...partOf(publication.pub_type),
         about,
         author: [...publicationContributors],
         datePublished: publication.pub_date,
         dateModified: publication.revision_history.date,
-        image: publication.promo_image && path.join(imageDir, publication.promo_image),
+        image: publication.promo_image && new URL(path.join(imageDir, publication.promo_image), publication.url).href,
         license: publication.license.url,
         keywords: publication.subject
           .filter(({ type }) => type === 'keyword')
@@ -132,7 +131,7 @@ export default function (eleventyConfig) {
 
     return JSON.stringify(
       {
-        '@context': 'http://schema.org/',
+        '@context': 'https://schema.org',
         ...Article
       }
     )

diff --git a/packages/11ty/_includes/components/head.js b/packages/11ty/_includes/components/head.js
@@ -24,7 +24,7 @@ export default function (eleventyConfig) {
       title ? `${title} | ${publication.title}` : publication.title
     )
 
-    const description = publication.description.full || publication.description.one_line
+    const description = abstract || publication.description.full || publication.description.one_line
 
     const publisherLinks = publication.publisher
       .filter(({ url }) => url)

diff --git a/packages/11ty/_includes/components/link-list.js b/packages/11ty/_includes/components/link-list.js
@@ -14,7 +14,7 @@ export default function (eleventyConfig) {
 
   return function (params) {
     const { links, classes = [] } = params
-    if (!links) return ''
+    if (!links || links.length === 0) return ''
 
     return html`
       <ul class="${classes.join(' ')}">

diff --git a/packages/11ty/_includes/components/menu/index.js b/packages/11ty/_includes/components/menu/index.js
@@ -5,7 +5,7 @@ import { html } from '#lib/common-tags/index.js'
  *
  * This controls the global table of contents for the publication, which is
  * available on all pages. For users with Javascript enabled, this menu is hidden
- * by default. Users with JS disabled will alwasy see the menu in its expanded state.
+ * by default. Users with JS disabled will always see the menu in its expanded state.
  *
  * @param      {Object}  eleventyConfig
  * @param      {Object}  params

diff --git a/packages/11ty/_includes/components/modal/index.js b/packages/11ty/_includes/components/modal/index.js
@@ -25,6 +25,7 @@ export default function (eleventyConfig) {
           data-modal-close
           class="q-modal__close-button"
           id="close-modal"
+          aria-label="Close Modal"
         ></button>
       </q-modal>
     `

diff --git a/packages/11ty/_includes/components/navigation.js b/packages/11ty/_includes/components/navigation.js
@@ -42,10 +42,10 @@ export default function (eleventyConfig) {
       const secondPageLink = collections.navigation[1].url
       return `
         <li class="quire-navbar-page-controls__item quire-home-page">
-          <a href="${secondPageLink}" rel="next">
+          <a href="${secondPageLink}" rel="next" aria-label="Next Page">
             <span class="visually-hidden">Next Page: </span>
-            <span class="quire-navbar-button play-button">
-              <svg data-outputs-exclude="epub,pdf">
+            <span class="quire-navbar-button play-button" aria-hidden="true">
+              <svg data-outputs-exclude="epub,pdf" aria-hidden="true" focusable="false">
                 <switch>
                   <use xlink:href="#start-icon"></use>
                 </switch>
@@ -62,9 +62,9 @@ export default function (eleventyConfig) {
       const { label, short_title, title } = data
       return html`
         <li class="quire-navbar-page-controls__item quire-previous-page">
-          <a href="${url}" rel="previous">
+          <a href="${url}" rel="previous" aria-label="Previous Page">
             <span class="visually-hidden">Previous Page: </span>
-            <svg class="left-icon" data-outputs-exclude="epub,pdf">
+            <svg class="left-icon" data-outputs-exclude="epub,pdf" aria-hidden="true" focusable="false">
               <switch>
                 <use xlink:href="#left-arrow-icon"></use>
               </switch>
@@ -79,10 +79,10 @@ export default function (eleventyConfig) {
       if (!previousPage) return ''
       return html`
         <li class="quire-navbar-page-controls__item quire-home-page">
-          <a href="${home}" rel="home">
+          <a href="${home}" rel="home" aria-label="Home Page">
             <span class="visually-hidden">Home Page: </span>
-            <span class="quire-navbar-button home-button">
-              <svg data-outputs-exclude="epub,pdf">
+            <span class="quire-navbar-button home-button" aria-hidden="true">
+              <svg data-outputs-exclude="epub,pdf" aria-hidden="true" focusable="false">
                 <switch>
                   <use xlink:href="#home-icon"></use>
                 </switch>
@@ -99,10 +99,10 @@ export default function (eleventyConfig) {
       const { label, short_title, title } = data
       return html`
         <li class="quire-navbar-page-controls__item quire-next-page">
-          <a href="${url}" rel='next'>
+          <a href="${url}" rel='next' aria-label="Next Page">
             <span class="visually-hidden">Next Page: </span>
             ${navBarLabel({ label, short_title, title })}
-            <svg data-outputs-exclude="epub,pdf">
+            <svg data-outputs-exclude="epub,pdf" aria-hidden="true" focusable="false">
               <switch>
                 <use xlink:href="#right-arrow-icon"></use>
               </switch>
@@ -114,26 +114,27 @@ export default function (eleventyConfig) {
 
     return html`
       <div class="quire-navbar">
-        <a href="#main" class="quire-navbar-skip-link" tabindex="1">
+        <a href="#main" class="quire-navbar-skip-link">
           Skip to Main Content
         </a>
         <nav class="quire-navbar-controls">
           <div class="quire-navbar-controls__left">
             <button
               class="quire-navbar-button search-button"
+              aria-label="Search"
               aria-controls="quire-search"
               onclick="toggleSearch()"
             >
-              <svg data-outputs-exclude="epub,pdf">
+              <svg data-outputs-exclude="epub,pdf" aria-hidden="true" focusable="false">
                 <switch>
                   <use xlink:href="#search-icon"></use>
                 </switch>
               </svg>
               <span class="visually-hidden">Search</span>
             </button>
           </div>
-          <div class="quire-navbar-controls__center">
-            <ul class="quire-navbar-page-controls" role="navigation" aria-label="quick">
+          <div class="quire-navbar-controls__center" aria-label="Page navigation">
+            <ul class="quire-navbar-page-controls">
               ${navBarStartButton()}
               ${navBarPreviousButton()}
               ${navBarHomeButton()}
@@ -145,11 +146,12 @@ export default function (eleventyConfig) {
               class="quire-navbar-button menu-button"
               id="quire-controls-menu-button"
               onclick="toggleMenu()"
+              aria-label="Table of Contents"
               aria-expanded="true"
               aria-controls="quire-menu"
               tabindex="2"
             >
-              <svg data-outputs-exclude="epub,pdf">
+              <svg data-outputs-exclude="epub,pdf" aria-hidden="true" focusable="false">
                 <switch>
                   <use xlink:href="#nav-icon"></use>
                 </switch>

diff --git a/packages/11ty/_includes/components/page-buttons.js b/packages/11ty/_includes/components/page-buttons.js
@@ -25,8 +25,13 @@ export default function (eleventyConfig) {
       if (!previousPage) return
       return html`
         <li class="quire-nav-button prev">
-          <a href="${previousPage.url}">${icon({ type: 'left-arrow', description: 'Go back a page' })}\u0020<span class="nav-title">${prevButtonText}</span></a>
-          <span class="visually-hidden">Previous Page (left keyboard arrow or swipe)</span>
+          <a href="${previousPage.url}">
+            ${icon({ type: 'left-arrow', description: 'Previous page' })}\u0020
+            <span class="nav-title">${prevButtonText}</span>
+          </a>
+          <span class="visually-hidden">
+            (Use left keyboard arrow or swipe)
+          </span>
         </li>
       `
     }
@@ -35,19 +40,24 @@ export default function (eleventyConfig) {
       if (!nextPage) return
       return html`
         <li class="quire-nav-button next">
-          <a href="${nextPage.url}"><span class="nav-title">${nextButtonText}</span>\u0020${icon({ type: 'right-arrow', description: 'Go back next page' })}</a>
-            <span class="visually-hidden">Next Page (right keyboard arrow or swipe)</span>
+          <a href="${nextPage.url}">
+            <span class="nav-title">${nextButtonText}</span>\u0020
+            ${icon({ type: 'right-arrow', description: 'Next page' })}
+          </a>
+          <span class="visually-hidden">
+            (Use right keyboard arrow or swipe)
+          </span>
         </li>
       `
     }
 
     return html`
-      <div class="quire-contents-buttons" data-outputs-exclude="epub,pdf">
+      <nav aria-label="Page navigation" class="quire-contents-buttons" data-outputs-exclude="epub,pdf">
         <ul>
           ${prevPageButton()}
           ${nextPageButton()}
         </ul>
-      </div>
+      </nav>
     `
   }
 }
diff --git a/packages/11ty/_includes/components/search.js b/packages/11ty/_includes/components/search.js
@@ -20,18 +20,18 @@ export default function (eleventyConfig) {
         </li>
       </template>
 
-      <div
+      <form
         aria-expanded="false"
         class="quire-search"
         data-search-index="${searchIndex}"
         id="js-search"
       >
         <div class="quire-search__close-button">
-          <button class="button is-medium" onclick="toggleSearch()">
+          <button aria-label="Close search" class="button is-medium" onclick="toggleSearch()">
             ${icon({ type: 'close', description: 'Close search window' })}
           </button>
         </div>
-        <div aria-label="search results" class="quire-search__inner">
+        <div aria-label="Search results" class="quire-search__inner">
           <section class="hero">
             <div class="hero-body">
               <div class="container">
@@ -45,16 +45,16 @@ export default function (eleventyConfig) {
                   type="search"
                   value=""
                 />
-                <span>${icon({ type: 'search', description: 'Search' })}</span>
+                <span aria-hidden="true">${icon({ type: 'search', description: 'Search' })}</span>
               </div>
-              <ul class="quire-search__inner__list" id="js-search-results-list">
+              <ul class="quire-search__inner__list" id="js-search-results-list" aria-live="polite">
                 <!-- js-search-results-template -->
               </ul>
               </div>
             </div>
           </section>
         </div>
-      </div>
+      </form>
     `
   }
 }
diff --git a/packages/11ty/_includes/components/table-of-contents/item/image.js b/packages/11ty/_includes/components/table-of-contents/item/image.js
@@ -20,7 +20,7 @@ export default function (eleventyConfig) {
     return html`
       <div class="card-image">
         <figure class="image">
-          <img src="${imgPath}" alt="${alt}" />
+          <img src="${imgPath}" alt="${alt}" loading="lazy" />
         </figure>
       </div>
     `