From 9c67e4c2cb66bb54ce53d20937c2bc4b2484a2c1 Mon Sep 17 00:00:00 2001
From: vimux <vimux@protonmail.com>
Date: Thu, 29 Nov 2018 09:38:20 -0500
Subject: [PATCH] Add keyboard-only focus on main menu button

---
 layouts/partials/menu.html | 12 +++++++-----
 static/css/main.css        | 26 ++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 6a291f6..82127e2 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -1,10 +1,12 @@
 {{- if .Site.Menus.main }}
 <nav class="main-nav" role="navigation">
-	<button id="toggle" class="main-nav__btn" aria-label="Menu toggle" aria-expanded="false">
-		<svg class="main-nav__btn-icon icon-menu" width="18" height="18" viewBox="0 0 18 18">
-			<path class="icon-menu__burger" d="M18 0v3.6H0V0h18zM0 10.8h18V7.2H0v3.6zM0 18h18v-3.6H0V18z"/>
-			<path class="icon-menu__x" d="M11.55 9L18 15.45 15.45 18 9 11.55 2.55 18 0 15.45 6.45 9 0 2.55 2.55 0 9 6.45 15.45 0 18 2.55 11.55 9z"/>
-		</svg>
+	<button id="toggle" class="main-nav__btn" aria-label="Menu toggle" aria-expanded="false" tabindex="0">
+		<div class="main-nav__btn-box" tabindex="-1">
+			<svg class="main-nav__icon icon-menu" width="18" height="18" viewBox="0 0 18 18" >
+				<path class="icon-menu__burger" d="M18 0v3.6H0V0h18zM0 10.8h18V7.2H0v3.6zM0 18h18v-3.6H0V18z"/>
+				<path class="icon-menu__x" d="M11.55 9L18 15.45 15.45 18 9 11.55 2.55 18 0 15.45 6.45 9 0 2.55 2.55 0 9 6.45 15.45 0 18 2.55 11.55 9z"/>
+			</svg>
+		</div>
 	</button>
 	<ul id="menu" class="main-nav__list">
 		{{- $currentNode := . }}
diff --git a/static/css/main.css b/static/css/main.css
index 75dbc1d..7f4c82b 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -477,15 +477,15 @@ mark {
 }
 
 .main-nav__btn {
+	display: block;
 	float: right;
-	width: 42px;
-	height: 42px;
 	padding: 0;
 	font-size: 1em;
 	cursor: pointer;
 	background-color: #2a2a2a;
 	border: 0;
 	border-left: 1px solid #333;
+	outline: 0;
 	fill: #f8ae00;
 }
 
@@ -494,6 +494,28 @@ mark {
 	color: #000;
 }
 
+.main-nav__btn-box {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 42px;
+	height: 42px;
+}
+
+:focus > .main-nav__btn-box {
+	box-shadow: inset 0 0 1px 3px #4285f4;
+}
+
+button:not(:-moz-focusring):focus > .main-nav__btn-box {
+	box-shadow: none;
+}
+
+.main-nav__btn:focus,
+.main-nav__btn-box:focus {
+	outline: none;
+}
+
 .main-nav__btn .icon-menu__burger {
 	display: inline;
 }