blog

commit: 5244720d8d97fa6340de0c0a0e4d767fae55b5eb
parent 69752b5101a11248c46fdeeb6ce4e3f8379b04c0
Author: Haelwenn (lanodan) Monnier <contact@hacktivis.me>
Date:   Sat, 16 Mar 2019 22:45:26 +0100

<nav> is now keyboard-accessible

Thanks to [1] for the hint on `:focus-within`.

1: https://css-tricks.com/solved-with-css-dropdown-menus/

Diffstat:
M
css/index.css
17
++++++++++++++---
M
templates/en/nav.shtml
4
++--
M
templates/fr/nav.shtml
4
++--

3 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/css/index.css b/css/index.css
@@ -109,11 +109,15 @@ nav ul li {
 	display: inline-table;
 	transition: 0.5s;
 }
+nav li:focus-within,
 nav li:hover {
 	background-color: var(--dark-ansi05);
 	color: var(--dark-ansi00-soft);
 }
-nav ul li:hover > ul {display: block;}
+nav ul li:focus-within > ul,
+nav ul li:hover > ul {
+	display: block;
+}
 nav ul ul {
 	background: var(--dark-ansi05);
 	color: var(--dark-ansi00-soft);
@@ -121,8 +125,15 @@ nav ul ul {
 	position: absolute;
 }
 nav ul ul li { display: block; }
-nav ul ul li:hover { background: var(--dark-ansi13); }
-nav ul ul li:hover:active { font-weight: normal; }
+
+nav ul ul li:focus-within,
+nav ul ul li:hover {
+	background: var(--dark-ansi13);
+}
+nav ul ul li:hover:active,
+nav ul ul li:focus-within:active {
+	font-weight: normal;
+}
 nav ul ul ul {
 	left: 100%;
 	position: absolute;
diff --git a/templates/en/nav.shtml b/templates/en/nav.shtml
@@ -1,12 +1,12 @@
 		<nav>
 			<ul class="menus">
 				<li><a href="/home">Home</a></li>
-				<li class="menu"><span>Myself</span><ul>
+				<li tabindex="0" class="menu"><span>Myself</span><ul>
 					<li><a href="/about">About</a></li>
 					<li><a href="/librism">Désintox’ / FOSS activism</a></li>
 					<li><a href="/animelist">Anime List</a></li>
 				</ul></li>
-				<li class="menu"><span>Pages</span><ul>
+				<li tabindex="0" class="menu"><span>Pages</span><ul>
 					<li><a href="/abgilpqt+">ABGILPQT+</a></li>
 					<li><a href="/bookmarks">Bookmarks</a></li>
 					<li><a href="/coding%20style">coding style</a></li>
diff --git a/templates/fr/nav.shtml b/templates/fr/nav.shtml
@@ -1,12 +1,12 @@
 		<nav>
 			<ul class="menus">
 				<li><a href="/accueil">Accueil</a></li>
-				<li class="menu"><span>Perso’</span><ul>
+				<li tabindex="0" class="menu"><span>Perso’</span><ul>
 					<li><a href="/%C3%A0%20propos">À propos</a></li>
 					<li><a href="/librisme">Désintox’ / Engagement libriste</a></li>
 					<li><a href="/animelist">Anime List(en)</a></li>
 				</ul></li>
-				<li class="menu"><span>Pages diverses</span><ul>
+				<li tabindex="0" class="menu"><span>Pages diverses</span><ul>
 					<li><a href="/bitoduc">Bitudoc (termes info’ en français)</a></li>
 					<li><a href="/antisèche-nginx">Antisèche nginx</a></li>
 				</ul></li>