fix #30 add basic keyboard browsing

index.css

@@ -84,6 +84,9 @@ section.select-list {
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 }
+section.select-list:focus {
+	outline: none;
+}
 section.select-list .entry {
 	position: relative;
 	display: flex;

index.html

@@ -89,7 +89,7 @@
 
 	<div class="article-wrapper">
 		<article>
-			<section class="select-list">
+			<section class="select-list" tabindex="0">
 				<div id="select-font">
 					<!-- filled from json -->
 				</div>

index.js

@@ -145,6 +145,26 @@ function toggleFavorite(alias) {
 	return false;
 }
 
+function nextFont() {
+	const activeLink = document.querySelector(".entry .active");
+	const activeEntry = activeLink.parentNode;
+	const next = activeEntry.nextSibling;
+	if (next && next.matches(".entry")) {
+		next.querySelector("a").click();
+		next.scrollIntoView();
+	}
+}
+
+function previousFont() {
+	const activeLink = document.querySelector(".entry .active");
+	const activeEntry = activeLink.parentNode;
+	const next = activeEntry.previousSibling;
+	if (next && next.matches(".entry")) {
+		next.querySelector("a").click();
+		next.scrollIntoView();
+	}
+}
+
 $(document).ready(function() {
 	var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*=\s*([^;]*).*$)|^.*$/, "$1");
 	var cookieValueSize = document.cookie.replace(/(?:(?:^|.*;\s*)size\s*=\s*([^;]*).*$)|^.*$/, "$1");
@@ -186,4 +206,24 @@ $(document).ready(function() {
 		$("#select-theme :selected").prev().prop("selected", true);
 		selectTheme();
 	});
+
+	$("body").on("keydown", function(event) {
+		if (
+			event.target === document.querySelector(".select-list")
+			&& ! event.ctrlKey
+			&& ! event.altKey
+			&& ! event.metaKey
+			&& ! event.shiftKey
+		) {
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				event.stopPropagation();
+				previousFont();
+			} else if (event.key === "ArrowDown") {
+				event.preventDefault();
+				event.stopPropagation();
+				nextFont();
+			}
+		}
+	});
 });