Improve accessibility and keyboard navigation

htlin222 · Jul 7, 2020 · bf93daf · bf93daf
1 parent f416a71
commit bf93daf
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+}
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -1,7 +1,7 @@
 # hugo server --minify --themesDir ... --baseURL=http://0.0.0.0:1313/theme/hugo-book/
 
 baseURL = 'https://example.com/'
-title = 'Hugo Book'
+title = 'Hugo Book having long site title'
 theme = 'hugo-book'
 
 # Book configuration

diff --git a/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content b/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
diff --git a/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json b/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json
@@ -1 +1 @@
-{"Target":"book.min.f11f00e4d2659e7749c679f7a29960dab5462bcb609a767e0f2ea963159b9024.css","MediaType":"text/css","Data":{"Integrity":"sha256-8R8A5NJlnndJxnn3oplg2rVGK8tgmnZ+Dy6pYxWbkCQ="}}
+{"Target":"book.min.6cd8553a6854f4812343f0f0c8baca31271e686434f381fbe3c7226f66639176.css","MediaType":"text/css","Data":{"Integrity":"sha256-bNhVOmhU9IEjQ/DwyLrKMSceaGQ084H748cib2ZjkXY="}}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,7 +7,8 @@
 </head>
 
 <body dir={{ .Site.Language.LanguageDirection }}>
-  <input type="checkbox" class="hidden" id="menu-control" />
+  <input type="checkbox" class="hidden toggle" id="menu-control" />
+  <input type="checkbox" class="hidden toggle" id="toc-control" />
   <main class="container flex">
     <aside class="book-menu">
       {{ template "menu" . }} <!-- Left menu Content -->
@@ -52,10 +53,9 @@
   {{ partial "docs/header" . }}
 
   {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
-    <input type="checkbox" class="hidden" id="toc-control" />
-    <aside class="hidden clearfix">
-      {{ template "toc" . }}
-    </aside>
+  <aside class="hidden clearfix">
+    {{ template "toc" . }}
+  </aside>
   {{ end }}
 {{ end }}
 

diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
@@ -4,7 +4,7 @@
 
 <div class="book-tabs">
 {{- range $index, $tab := .Scratch.Get $group -}}
-  <input type="radio" class="hidden" name="{{ $group }}" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
+  <input type="radio" class="toggle" name="{{ $group }}" id="{{ printf "%s-%d" $group $index }}" {{ if not $index }}checked="checked"{{ end }} />
   <label for="{{ printf "%s-%d" $group $index }}">
     {{- $tab.Name -}}
   </label>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Target":"book.min.f11f00e4d2659e7749c679f7a29960dab5462bcb609a767e0f2ea963159b9024.css","MediaType":"text/css","Data":{"Integrity":"sha256-8R8A5NJlnndJxnn3oplg2rVGK8tgmnZ+Dy6pYxWbkCQ="}}
		{"Target":"book.min.6cd8553a6854f4812343f0f0c8baca31271e686434f381fbe3c7226f66639176.css","MediaType":"text/css","Data":{"Integrity":"sha256-bNhVOmhU9IEjQ/DwyLrKMSceaGQ084H748cib2ZjkXY="}}