A lot of small changes improving keyboard navigation, readability and accesibility

assets/_main.scss

@@ -43,7 +43,7 @@ small {
   @extend .text-small;
 }
 
-:focus {
+:focus-visible, input.toggle:focus-visible + label {
   @include outline;
 }
 
@@ -57,7 +57,7 @@ nav ul {
   }
 
   a {
-    padding: .5em 0;
+    padding: 0.5em 0;
     display: flex;
     transition: opacity 0.1s ease-in-out;
   }
@@ -154,12 +154,12 @@ a .book-icon {
 
 // for RTL support
 body[dir="rtl"] .book-menu {
-  input.toggle + label::after {
-    content: "◂";
+  input.toggle + label > img:last-child {
+    transform: rotate(180deg);
   }
 
-  input.toggle:checked + label::after {
-    transform: rotate(-90deg);
+  input.toggle:checked + label > img:last-child {
+    transform: rotate(90deg);
   }
 }
 
@@ -241,7 +241,7 @@ body[dir="rtl"] .book-menu {
         padding: 0;
       }
 
-      &:hover > ul {
+      &:hover > ul, &:focus-within > ul {
         display: block;
       }
     }
@@ -251,13 +251,12 @@ body[dir="rtl"] .book-menu {
 .book-search {
   position: relative;
   margin: $padding-8 0;
-  border-bottom: 1px solid transparent;
 
   input {
     width: 100%;
     padding: $padding-8;
 
-    border: 0;
+    border: $padding-1 solid var(--gray-200);
     border-radius: var(--border-radius);
 
     background: var(--gray-100);
@@ -384,10 +383,6 @@ body[dir="rtl"] .book-menu {
     display: inline;
   }
 
-  #menu-control:focus ~ main label[for="menu-control"] {
-    @include outline;
-  }
-
   #menu-control:checked ~ main {
     .book-menu {
       visibility: initial;
@@ -412,10 +407,6 @@ body[dir="rtl"] .book-menu {
     }
   }
 
-  #toc-control:focus ~ main label[for="toc-control"] {
-    @include outline;
-  }
-
   #toc-control:checked ~ main {
     .book-header aside {
       display: block;

assets/_markdown.scss

@@ -25,8 +25,7 @@
       margin-inline-start: .25em;
     }
 
-    &:hover a.anchor,
-    a.anchor:focus {
+    &:hover a.anchor, a.anchor:focus-visible {
       opacity: initial;
       text-decoration: none;
     }
@@ -64,8 +63,9 @@
   code {
     direction: ltr;
     unicode-bidi: embed;
-    padding: 0 $padding-4;
-    background: var(--gray-200);
+    padding: .125em .25em;
+    background: var(--gray-100);
+    border: $padding-1 solid var(--gray-200);
     border-radius: var(--border-radius);
     font-size: 0.875em;
   }
@@ -73,11 +73,17 @@
   pre {
     padding: $padding-16;
     background: var(--gray-100);
+    border: $padding-1 solid var(--gray-200);
     border-radius: var(--border-radius);
     overflow-x: auto;
 
+    &:focus {
+      @include outline;
+    }
+
     code {
       padding: 0;
+      border: 0;
       background: none;
     }
   }
@@ -151,7 +157,15 @@
     unicode-bidi: embed;
     border-radius: var(--border-radius);
 
+    table tbody {
+      border: $padding-1 solid var(--gray-200);
+    }
+
     table tr {
+      pre {
+        border: 0;
+      }
+
       td pre code > span {
         display: flex;
       }
@@ -160,6 +174,7 @@
         margin: 0;
         padding-inline-end: 0;
       }
+
       td:nth-child(2) pre {
         margin: 0;
         padding-inline-start: 0;

assets/_shortcodes.scss

@@ -8,8 +8,6 @@
     border: $padding-1 solid var(--gray-200);
     border-radius: var(--border-radius);
 
-    overflow: hidden;
-
     display: flex;
     flex-wrap: wrap;
 
@@ -35,10 +33,6 @@
     input[type="radio"]:checked+label+.book-tabs-content {
       display: block;
     }
-
-    input[type="radio"]:focus+label {
-      @include outline;
-    }
   }
 
   // {{< columns >}}
@@ -99,7 +93,7 @@
 
     display: inline-block;
     font-size: var(--font-size-smaller);
-    font-weight: var(body-font-weight);
+    font-weight: var(--body-font-weight);
     vertical-align: middle;
     border-radius: var(--border-radius);
     border: $padding-1 solid var(--accent-color);
@@ -238,10 +232,12 @@
   }
 
   .book-codeblock-filename {
-    background: var(--gray-200);
+    background: var(--gray-100);
+    border: $padding-1 solid var(--gray-200);
+    border-bottom: 0;
     font-size: var(--font-size-smaller);
     margin-top: $padding-16;
-    padding: $padding-4 $padding-16;
+    padding: $padding-4 $padding-8;
     border-start-start-radius: var(--border-radius);
     border-start-end-radius: var(--border-radius);
 

assets/_utils.scss

@@ -89,6 +89,5 @@ input.toggle {
 
 @mixin outline {
   outline-style: auto;
-  outline-color: currentColor;
-  outline-color: -webkit-focus-ring-color;
+  outline-color: var(--color-link);
 }

assets/clipboard.js

@@ -1,23 +1,11 @@
 (function () {
-  function select(element) {
-    const selection = window.getSelection();
-
-    const range = document.createRange();
-    range.selectNodeContents(element);
-
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
-
-  document.querySelectorAll("pre code").forEach(code => {
-    code.addEventListener("click", function (event) {
-      if (window.getSelection().toString()) {
-        return;
-      }
-      select(code.parentElement);
-
+  document.querySelectorAll("pre:has(code)").forEach(code => {
+    code.addEventListener("click", code.focus);
+    code.addEventListener("copy", function (event) {
+      event.preventDefault();
       if (navigator.clipboard) {
-        navigator.clipboard.writeText(code.parentElement.textContent);
+        const content = window.getSelection().toString() || code.textContent;
+        navigator.clipboard.writeText(content);
       }
     });
   });

assets/search-data.json

@@ -10,7 +10,7 @@
     "id": {{ $index }},
     "href": "{{ $page.RelPermalink }}",
     "title": {{ (partial "docs/title" $page) | jsonify }},
-    "section": {{ (partial "docs/title" $page.Parent) | jsonify }},
+    "section": {{ (partial "docs/title" $page.Parent) | default $.Site.Title | jsonify }},
     "content": {{ $page.Plain | jsonify }}
 }
 {{- end -}}

layouts/_partials/docs/brand.html

@@ -1,7 +1,7 @@
 <h2 class="book-brand">
   <a class="flex align-center" href="{{ cond (not .Site.Home.File) .Sites.Default.Home.RelPermalink .Site.Home.RelPermalink }}">
     {{- with .Site.Params.BookLogo -}}
-    <img src="{{ . | relURL }}" alt="Logo" />
+    <img src="{{ . | relURL }}" alt="{{ partial "docs/text/i18n" "Logo" }}" />
     {{- end -}}
     <span>{{ .Site.Title }}</span>
   </a>

layouts/_partials/docs/footer.html

@@ -3,8 +3,8 @@
 <div>
 {{ if and .GitInfo .Site.Params.BookLastChangeLink }}
   {{- $date := partial "docs/date" (dict "Date" .Lastmod "Format" .Site.Params.BookDateFormat) -}}
-  <a class="flex align-center" href="{{ partial "docs/links/commit" . }}" title='{{ i18n "Last modified by" }} {{ .GitInfo.AuthorName }} | {{ $date }}' target="_blank" rel="noopener">
-    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="" />
+  <a class="flex align-center" href="{{ partial "docs/links/commit" . }}" title='{{ partial "docs/text/i18n" "Last modified by" }} {{ .GitInfo.AuthorName }} | {{ $date }}' target="_blank" rel="noopener">
+    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Calendar" }}" />
     <span>{{ $date }}</span>
   </a>
 {{ end }}
@@ -13,8 +13,8 @@
 <div>
 {{ if and .File .Site.Params.BookEditLink }}
   <a class="flex align-center" href="{{ partial "docs/links/edit" . }}" target="_blank" rel="noopener edit">
-    <img src="{{ partial "docs/icon" "edit" }}" class="book-icon" alt="" />
-    <span>{{ i18n "Edit this page" }}</span>
+    <img src="{{ partial "docs/icon" "edit" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Edit" }}" />
+    <span>{{ partial "docs/text/i18n" "Edit this page" }}</span>
   </a>
 {{ end }}
 </div>
@@ -22,8 +22,3 @@
 </div>
 
 {{ partial "docs/prev-next" . }}
-
-{{ $script := resources.Get "clipboard.js" | resources.Minify }}
-{{ with $script.Content }}
-  <script>{{ . | safeJS }}</script>
-{{ end }}

layouts/_partials/docs/header.html

@@ -1,13 +1,13 @@
 <div class="flex align-center justify-between">
   <label for="menu-control">
-    <img src="{{ partial "docs/icon" "menu" }}" class="book-icon" alt="Menu" />
+    <img src="{{ partial "docs/icon" "menu" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Menu" }}" />
   </label>
 
   <h3>{{ partial "docs/title" . }}</h3>
 
   <label for="toc-control">
     {{ if partial "docs/toc-show" . }}
-    <img src="{{ partial "docs/icon" "toc" }}" class="book-icon" alt="Table of Contents" />
+    <img src="{{ partial "docs/icon" "toc" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Table of Contents" }}" />
     {{ end }}
   </label>
 </div>

layouts/_partials/docs/html-head.html

@@ -5,7 +5,7 @@ https://github.com/alex-shpak/hugo-book
 
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="description" content="{{ default .Summary .Description }}">
+<meta name="description" content="{{ or .Description .Summary | plainify | htmlUnescape }}">
 <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#343a40">
 <meta name="color-scheme" content="light dark">
@@ -15,6 +15,7 @@ https://github.com/alex-shpak/hugo-book
 {{- end -}}
 
 {{ partial "opengraph.html" . }}
+{{ partial "schema.html" . }}
 
 <title>{{ partial "docs/html-head-title" . }}</title>
 {{ partial "docs/html-head-favicon" . }}

layouts/_partials/docs/icon.html

@@ -1,3 +1,2 @@
-{{- with resources.Get (printf "icons/%s.svg" .) -}}
-{{- .RelPermalink -}}
-{{- end -}}
+{{- $icon := resources.Get (printf "icons/%s.svg" .) -}}
+{{- return $icon.RelPermalink -}}

layouts/_partials/docs/languages.html

@@ -14,10 +14,10 @@
     <input type="checkbox" id="languages" class="toggle" />
     <label for="languages" class="flex">
       <a role="button">
-        <img src="{{ partial "docs/icon" "translate" }}" class="book-icon" alt="Languages" />
+        <img src="{{ partial "docs/icon" "translate" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Languages" }}" />
         {{ $.Site.Language.LanguageName }}
       </a>
-      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" />
+      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Expand" }}" />
     </label>
 
     <ul>

layouts/_partials/docs/menu-filetree.html

@@ -1,4 +1,4 @@
-{{ $bookSection := default "docs" .Site.Params.BookSection  }}
+{{ $bookSection := default "docs" .Site.Params.BookSection }}
 {{ if eq $bookSection "*" }}
   {{ $bookSection = "/" }}{{/* Backward compatibility */}}
 {{ end }}
@@ -34,7 +34,7 @@
       <a {{ if .Page.Content }}href="{{ .Page.RelPermalink }}"{{ else }}role="button"{{ end }} class="{{ if $current }}active{{ end }}">
         {{ template "book-icon-title" .Page -}}
       </a>
-      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" />
+      <img src="{{ partial "docs/icon" "chevron-right" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Expand" }}" />
     </label>
   {{ else if .Page.Params.BookHref }}
     <a href="{{ .Page.Params.BookHref }}" class="{{ if $current }}active{{ end }}" target="_blank" rel="noopener">
@@ -53,7 +53,7 @@
 
 {{ define "book-icon-title" }}
 {{- with .Page.Params.BookIcon -}}
-  <img src="{{ partial "docs/icon" . }}" class="book-icon" />
+  <img src="{{ partial "docs/icon" . }}" class="book-icon" alt="{{ partial "docs/text/i18n" . }}" />
 {{- end -}}
 {{- partial "docs/title" .Page -}}
 {{ end }}

layouts/_partials/docs/menu-hugo.html

@@ -36,7 +36,7 @@
 
 {{ define "book-menu-title" }}
 {{- with .Params.BookIcon -}}
-  <img src="{{ partial "docs/icon" . }}" class="book-icon" />
+  <img src="{{ partial "docs/icon" . }}" class="book-icon" alt="{{ partial "docs/text/i18n" . }}" />
 {{- end -}}
 {{- if .Name -}}
   {{- .Name -}}

layouts/_partials/docs/pagination.html

@@ -3,7 +3,7 @@
   <span>
   {{- with .Paginator.Prev }}
     <a href="{{ .URL }}" class="flex align-center">
-      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" />
+      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Backward" }}" />
     </a>
   {{ end }}
   </span>
@@ -20,7 +20,7 @@
   <span>
   {{- with .Paginator.Next }}
     <a href="{{ .URL }}" class="flex align-center">
-      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" />
+      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Forward" }}" />
     </a>
   {{ end }}
   </span>

layouts/_partials/docs/post-meta.html

@@ -1,6 +1,6 @@
 {{ with .Date }}
   <div class="flex align-center text-small book-post-date">
-    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="" />
+    <img src="{{ partial "docs/icon" "calendar" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Calendar" }}" />
     <span>{{ partial "docs/date" (dict "Date" . "Format" $.Site.Params.BookDateFormat) }}</span>
   </div>
 {{ end }}

layouts/_partials/docs/post-prev-next.html

@@ -2,7 +2,7 @@
   <div>
   {{ with .NextInSection }}
     <a href="{{ .RelPermalink }}" class="flex align-center">
-      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
+      <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Backward" }}" />
       <span>{{ partial "docs/title" . }}</span>
     </a>
   {{ end }}
@@ -11,7 +11,7 @@
   {{ with .PrevInSection }}
     <a href="{{ .RelPermalink }}" class="flex align-center">
       <span>{{ partial "docs/title" . }}</span>
-      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
+      <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Forward" }}" />
     </a>
   {{ end }}
   </div>

layouts/_partials/docs/prev-next.html

@@ -13,7 +13,7 @@
     <span>
     {{ with $prev }}
       <a href="{{ .RelPermalink }}" class="flex align-center">
-        <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="Previous" title="{{ partial "docs/title" . }}" />
+        <img src="{{ partial "docs/icon" "backward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Backward" }}" />
         <span>{{ partial "docs/title" . }}</span>
       </a>
     {{ end }}
@@ -22,7 +22,7 @@
     {{ with $next }}
       <a href="{{ .RelPermalink }}" class="flex align-center">
         <span>{{ partial "docs/title" . }}</span>
-        <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="Next" title="{{ partial "docs/title" . }}" />
+        <img src="{{ partial "docs/icon" "forward" }}" class="book-icon" alt="{{ partial "docs/text/i18n" "Forward" }}" />
       </a>
     {{ end }}
     </span>

layouts/_partials/docs/search.html

@@ -1,9 +1,11 @@
 {{ if default true .Site.Params.BookSearch }}
 <div class="book-search hidden">
-  <input type="text" id="book-search-input" placeholder="{{ i18n "Search" }}" aria-label="{{ i18n "Search" }}" maxlength="64" data-hotkeys="s/" />
+  <input id="book-search-input" type="text" 
+    placeholder="{{ partial "docs/text/i18n" "Search" }}"
+    aria-label="{{ partial "docs/text/i18n" "Search" }}"
+    maxlength="64" data-hotkeys="s/" />
   <div class="book-search-spinner hidden"></div>
   <ul id="book-search-results"></ul>
 </div>
 <script>document.querySelector(".book-search").classList.remove("hidden")</script>
-
 {{ end }}

layouts/_partials/docs/taxonomy.html

@@ -3,7 +3,7 @@
   {{ range $term, $_ := .Site.Taxonomies }}
     {{ with $.Site.GetPage (printf "/%s" $term | urlize) }}
     <li class="book-section-flat">
-      <a>{{ T .Title | default .Title }}</a>
+      <a>{{ partial "docs/text/i18n" .Title }}</a>
       <ul>
       {{ range .Pages }}
         <li class="flex align-center">

layouts/_partials/docs/text/i18n.html

@@ -0,0 +1 @@
+{{- return or (i18n .) . -}}

layouts/_shortcodes/card.html

@@ -12,7 +12,7 @@
 {{- define "book-card-content" -}}
 {{- with .Get "image" -}}
   {{- $destination := partial "docs/links/portable-image" (dict "Page" $.Page "Destination" .) -}}
-  <img src="{{ $destination | safeURL }}" />
+  <img src="{{ $destination | safeURL }}" alt="{{ partial "docs/text/i18n" ($.Get "alt" ) }}" />
   {{- end -}}
   <div class="markdown-inner">
 {{ with .Inner }}{{ . }}{{ end -}}

layouts/_shortcodes/i18n.html

@@ -1,2 +1 @@
-{{- $content := .Get 0 -}}
-{{- default $content (i18n $content) -}}
+{{- partial "docs/text/i18n" (.Get 0) -}}

layouts/_shortcodes/section.html

@@ -6,7 +6,7 @@
   </dt>
   {{ if (in $.Params "summary") -}}
   <dd class="markdown-inner">
-    {{ default .Summary .Description }}
+    {{- or .Description .Summary site.Params.description | plainify | htmlUnescape }}
   </dd>
   {{ end -}}
 {{ end }}

layouts/baseof.html

@@ -24,6 +24,7 @@
         {{ template "comments" . }} <!-- Comments block -->
         {{ partial "docs/inject/footer" . }}
         {{ template "copyright" . }} <!-- Copyright block -->
+        {{ template "clipboard" . }}
       </footer>
 
       <label for="menu-control" class="hidden book-menu-overlay"></label>
@@ -62,12 +63,19 @@
   {{ partial "docs/footer" . }}
 {{ end }}
 
-{{ define "copyright" }}
-{{ if .Site.Copyright }}
-<div class="book-copyright flex justify-center">
-  {{ partial "docs/copyright" . }}
-</div>
+{{ define "clipboard" }}
+  <!-- Clipboard -->
+  {{ with resources.Get "clipboard.js" | resources.Minify }}
+    <script>{{ .Content | safeJS }}</script>
+  {{ end }}
 {{ end }}
+
+{{ define "copyright" }}
+  {{ if .Site.Copyright }}
+  <div class="book-copyright flex justify-center">
+    {{ partial "docs/copyright" . }}
+  </div>
+  {{ end }}
 {{ end }}
 
 {{ define "comments" }}
@@ -85,13 +93,13 @@
 {{ end }}
 
 {{ define "toc-container" }}
-{{ if partial "docs/toc-show" . }}
-<aside class="book-toc">
-  <div class="book-toc-content">
-    {{ template "toc" . }}
-  </div>
-</aside>
-{{ end }}
+  {{ if partial "docs/toc-show" . }}
+  <aside class="book-toc">
+    <div class="book-toc-content">
+      {{ template "toc" . }}
+    </div>
+  </aside>
+  {{ end }}
 {{ end }}
 
 {{ define "toc" }}

layouts/posts/list.html

@@ -14,7 +14,7 @@
       {{- $thumbnail := default "thumbnail.*" .Params.BookPostThumbnail -}}
       {{- with or (.Resources.GetMatch $thumbnail) (resources.GetMatch $thumbnail) -}}
       <div class="book-post-thumbnail">
-        <img src="{{ .RelPermalink }}" />
+        <img src="{{ .RelPermalink }}" alt="{{ partial "docs/text/i18n" "Thumbnail" }}" />
       </div>
       {{- end -}}
     </div>