adoralaura/hugo-book-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve accessibility and keyboard navigation

Browse source
This commit is contained in:
Alex Shpak 2020-07-07 23:06:21 +02:00
parent f416a71bf8
commit bf93dafdfa
9 changed files with 57 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
assets/_main.scss
View file

@ -38,6 +38,10 @@ img {
vertical-align: baseline; vertical-align: baseline;
} }
:focus {
@include outline;
}
aside nav ul { aside nav ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -98,7 +102,6 @@ ul.pagination {
nav { nav {
width: $menu-width; width: $menu-width;
padding: $padding-16; padding: $padding-16;
z-index: 1;
background: $body-background; background: $body-background;
@include fixed; @include fixed;
@ -195,10 +198,8 @@ ul.pagination {
@include spin(1s); @include spin(1s);
} }
#book-search-results {
small { small {
opacity: .5; opacity: 0.5;
}
} }
} }
@ -279,7 +280,7 @@ ul.pagination {
li.active img, li.active img,
li:hover img { li:hover img {
opacity: 1; opacity: initial;
} }
a { a {
@ -304,10 +305,16 @@ aside nav,
} }
@media screen and (max-width: $mobile-breakpoint) { @media screen and (max-width: $mobile-breakpoint) {
#menu-control,
#toc-control {
display: inline;
}
.book-menu { .book-menu {
visibility: hidden; visibility: hidden;
margin-inline-start: -$menu-width; margin-inline-start: -$menu-width;
font-size: $font-size-base; font-size: $font-size-base;
z-index: 1;
} }
.book-toc { .book-toc {
@ -318,7 +325,11 @@ aside nav,
display: block; display: block;
} }
#menu-control:checked + main { #menu-control:focus ~ main label[for="menu-control"] {
@include outline;
}
#menu-control:checked ~ main {
.book-menu { .book-menu {
visibility: initial; 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 //for RTL support
body[dir="rtl"] #menu-control:checked + main { body[dir="rtl"] #menu-control:checked + main {
.book-menu nav { .book-menu nav {
transform: translateX(-$menu-width); transform: translateX(-$menu-width);
} }
} }
#toc-control:checked + aside {
display: block;
}
} }
// Extra space for big screens // Extra space for big screens

6
assets/_markdown.scss
View file

@ -20,14 +20,14 @@
margin-bottom: $padding-16; margin-bottom: $padding-16;
a.anchor { a.anchor {
display: none; opacity: 0;
font-size: .75em; font-size: .75em;
vertical-align: middle; vertical-align: middle;
text-decoration: none; text-decoration: none;
} }
&:hover a.anchor { &:hover a.anchor, a.anchor:focus {
display: initial; opacity: initial;
} }
} }

3
assets/_shortcodes.scss
View file

@ -59,6 +59,9 @@
input[type="radio"]:checked + label + .book-tabs-content { input[type="radio"]:checked + label + .book-tabs-content {
display: block; display: block;
} }
input[type="radio"]:focus + label {
@include outline
}
} }
// {{< columns >}} // {{< columns >}}

14
assets/_utils.scss
View file

@ -54,6 +54,14 @@
display: none; display: none;
} }
input.toggle {
height: 0;
width: 0;
overflow: hidden;
opacity: 0;
position: absolute;
}
.clearfix::after { .clearfix::after {
content: ""; content: "";
display: table; display: table;
@ -76,3 +84,9 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} }
@mixin outline {
outline-style: auto;
outline-color: currentColor;
outline-color: -webkit-focus-ring-color;
}

2
exampleSite/config.toml
View file

@ -1,7 +1,7 @@
# hugo server --minify --themesDir ... --baseURL=http://0.0.0.0:1313/theme/hugo-book/ # hugo server --minify --themesDir ... --baseURL=http://0.0.0.0:1313/theme/hugo-book/
baseURL = 'https://example.com/' baseURL = 'https://example.com/'
title = 'Hugo Book' title = 'Hugo Book having long site title'
theme = 'hugo-book' theme = 'hugo-book'
# Book configuration # Book configuration

2
exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
View file

File diff suppressed because one or more lines are too long

2
exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json
View file

@ -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="}}

4
layouts/_default/baseof.html
View file

@ -7,7 +7,8 @@
</head> </head>
<body dir={{ .Site.Language.LanguageDirection }}> <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"> <main class="container flex">
<aside class="book-menu"> <aside class="book-menu">
{{ template "menu" . }} <!-- Left menu Content --> {{ template "menu" . }} <!-- Left menu Content -->
@ -52,7 +53,6 @@
{{ partial "docs/header" . }} {{ partial "docs/header" . }}
{{ if default true (default .Site.Params.BookToC .Params.BookToC) }} {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
<input type="checkbox" class="hidden" id="toc-control" />
<aside class="hidden clearfix"> <aside class="hidden clearfix">
{{ template "toc" . }} {{ template "toc" . }}
</aside> </aside>

2
layouts/shortcodes/tabs.html
View file

@ -4,7 +4,7 @@
<div class="book-tabs"> <div class="book-tabs">
{{- range $index, $tab := .Scratch.Get $group -}} {{- 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 }}"> <label for="{{ printf "%s-%d" $group $index }}">
{{- $tab.Name -}} {{- $tab.Name -}}
</label> </label>