suggestion keyboard navigation

css/profile-image.css

@@ -8,7 +8,7 @@
 	pointer-events: initial;
     
     margin: 0 auto;
-    margin-bottom: 90px;
+    margin-bottom: 110px;
     position: relative;
 
    	flex-flow: column wrap;

css/suggestions.css

@@ -50,11 +50,12 @@
 
 	height: auto;
 
-	/*Always center horizontally*/
+	/*Always stack and center horizontally*/
 	/*display: table-cell;*/
 	/*width: auto;*/
   	/*text-align: center;*/
 
+  	/*Always stack and center vertically*/
   	display: inline-flex;
   	width: 100%;
   	text-align: center;
@@ -87,11 +88,12 @@
 	background: var(--base-active-bg);
 }
 
-@media screen and (max-width: 580px) {
+@media screen and (max-height: 650px) {
 	/*The Li*/
 	#phrase {
-		display: inline-flex !important;
-		width: 100% !important;
+			/*Always stack and center horizontally*/
+		display: table-cell !important;
+		width: auto !important;
 	  	text-align: center !important;
 	}
 }

index.html

@@ -240,6 +240,7 @@
 	<script src="js/clock.js"></script>
 	<script src="js/sites-list.js"></script>
 	<script src="js/dock-buttons.js"></script>
+	<script src="js/auto-suggest.js"></script>
 	<script src="js/animate-profile-image.js"></script>
 	<script src="js/show-search-box.js"></script>
 	<script src="js/animate-dashboard.js"></script>
@@ -254,6 +255,5 @@
 	<script src="js/mobile-swipe-event.js"></script>
 	<script src="js/mobile-swipe-callback.js"></script>
 	<script src="js/keybindings.js"></script>
-	<script src="js/auto-suggest.js"></script>
 </body>
 </html>

js/auto-suggest.js

@@ -2,6 +2,18 @@ var searchBox = document.getElementById('searchBox');
 var suggestionsUL = document.getElementById('suggestions');
 var suggestionsContainer = document.getElementById('suggestionsContainer');
 
+
+const hideSuggestions = () => {
+	// Hide suggestions
+	suggestionsContainer.classList.remove('suggestionsShow');
+}
+
+const showSuggestions = () => {
+	// Show suggestions
+	suggestionsContainer.classList.add('suggestionsShow');
+}
+
+
 // Create input events
 const phraseEvents = button => {
 
@@ -16,6 +28,30 @@ const phraseEvents = button => {
 		} else if (event.key === 'Backspace') {
 
 			searchBox.focus();
+
+		} else if ((event.key == 'ArrowDown') || event.key == 'ArrowRight') {
+
+			event.preventDefault();
+
+			const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
+			const phraseIndex = (phraseButtons.indexOf(document.activeElement) + 1) % phraseButtons.length;
+       		const phraseButton = phraseButtons[phraseIndex];
+       		phraseButton.focus();
+
+		} else if ((event.key == 'ArrowUp') || event.key == 'ArrowLeft') {
+
+			event.preventDefault();
+
+			const phraseButtons = Array.prototype.slice.call(document.querySelectorAll('button'));
+			var phraseIndex = (phraseButtons.indexOf(document.activeElement) - 1) % phraseButtons.length;
+
+			if (phraseIndex < 0) { 
+				phraseIndex = phraseButtons.length - 1;
+			};
+
+			const phraseButton = phraseButtons[phraseIndex];
+       		phraseButton.focus();
+
 		}
 
 	}
@@ -63,7 +99,7 @@ const autocompleteCallback = phrase => {
 	}
 
 	// Show suggestions
-	suggestionsContainer.classList.add('suggestionsShow');
+	showSuggestions();
 }
 
 // Update every keyup
@@ -74,8 +110,7 @@ searchBox.onkeyup = event => {
 	if (searchBox.value < 1) {
 
 		// Hide suggestions
-		suggestionsContainer.classList.remove('suggestionsShow');
-
+		hideSuggestions();
 		return;
 	}
 

js/show-search-box.js

@@ -24,6 +24,9 @@ const hideSearchBox = () => {
 
     searchBox.value = '';
 
+    // Hide suggestions
+    hideSuggestions();
+
     searchBoxVisility = !searchBoxVisility;
 }