Improve accessibility and keyboard navigation

4 files changed, 48 insertions, 14 deletions

diff --git a/assets/_main.scss b/assets/_main.scss
index c32d945..b8a0e5d 100644
--- a/assets/_main.scss
+++ b/assets/_main.scss
@@ -38,6 +38,10 @@ img {
   vertical-align: baseline;
 }
 
+:focus {
+  @include outline;
+}
+
 aside nav ul {
   padding: 0;
   margin: 0;
@@ -98,7 +102,6 @@ ul.pagination {
   nav {
     width: $menu-width;
     padding: $padding-16;
-    z-index: 1;
     background: $body-background;
 
     @include fixed;
@@ -195,10 +198,8 @@ ul.pagination {
     @include spin(1s);
   }
 
-  #book-search-results {
-    small {
-      opacity: .5;
-    }
+  small {
+    opacity: 0.5;
   }
 }
 
@@ -279,7 +280,7 @@ ul.pagination {
 
     li.active img,
     li:hover img {
-      opacity: 1;
+      opacity: initial;
     }
 
     a {
@@ -304,10 +305,16 @@ aside nav,
 }
 
 @media screen and (max-width: $mobile-breakpoint) {
+  #menu-control,
+  #toc-control {
+    display: inline;
+  }
+
   .book-menu {
     visibility: hidden;
     margin-inline-start: -$menu-width;
     font-size: $font-size-base;
+    z-index: 1;
   }
 
   .book-toc {
@@ -318,7 +325,11 @@ aside nav,
     display: block;
   }
 
-  #menu-control:checked + main {
+  #menu-control:focus ~ main label[for="menu-control"] {
+    @include outline;
+  }
+
+  #menu-control:checked ~ main {
     .book-menu {
       visibility: initial;
     }
@@ -342,16 +353,22 @@ aside nav,
     }
   }
 
+  #toc-control:focus ~ main label[for="toc-control"] {
+    @include outline;
+  }
+
+  #toc-control:checked ~ main {
+    .book-header aside {
+      display: block;
+    }
+  }
+
   //for RTL support
   body[dir="rtl"] #menu-control:checked + main {
     .book-menu nav {
       transform: translateX(-$menu-width);
     }
   }
-
-  #toc-control:checked + aside {
-    display: block;
-  }
 }
 
 // Extra space for big screens
diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index e37ed8e..009473d 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -20,14 +20,14 @@
     margin-bottom: $padding-16;
 
     a.anchor {
-      display: none;
+      opacity: 0;
       font-size: .75em;
       vertical-align: middle;
       text-decoration: none;
     }
 
-    &:hover a.anchor {
-      display: initial;
+    &:hover a.anchor, a.anchor:focus {
+      opacity: initial;
     }
   }
 
diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
index 62a8b90..7802078 100644
--- a/assets/_shortcodes.scss
+++ b/assets/_shortcodes.scss
@@ -59,6 +59,9 @@
     input[type="radio"]:checked + label + .book-tabs-content {
       display: block;
     }
+    input[type="radio"]:focus + label {
+      @include outline
+    }
   }
 
   // {{< columns >}}
diff --git a/assets/_utils.scss b/assets/_utils.scss
index 01f1931..29ef1ca 100644
--- a/assets/_utils.scss
+++ b/assets/_utils.scss
@@ -54,6 +54,14 @@
   display: none;
 }
 
+input.toggle {
+  height: 0;
+  width: 0;
+  overflow: hidden;
+  opacity: 0;
+  position: absolute;
+}
+
 .clearfix::after {
   content: "";
   display: table;
@@ -76,3 +84,9 @@
   overflow-x: hidden;
   overflow-y: auto;
 }
+
+@mixin outline {
+  outline-style: auto;
+  outline-color: currentColor;
+  outline-color: -webkit-focus-ring-color;
+}