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

assets/_defaults.scss

@@ -93,4 +93,4 @@ $mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default;
 @mixin accent($name, $color, $tint: 0.1) {
   --color-accent-#{$name}: #{$color};
   --color-accent-#{$name}-tint: #{rgba($color, $tint)};
-}
+}

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