From a7da3d741ffef44e0fab96a43a36b73fed44ac15 Mon Sep 17 00:00:00 2001
From: Kenn Jacobsen <post@kennjacobsen.dk>
Date: Sun, 23 Jun 2019 12:30:17 +0200
Subject: [PATCH] V8: Add keyboard support for navigating search results
 (#5500)

---
 .../application/umbsearch.directive.js        | 65 +++++++++++++++++--
 .../components/application/umb-search.html    |  6 +-
 2 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
index 91eb077ba3..8434a96ba5 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
@@ -22,13 +22,16 @@
         vm.search = search;
         vm.clickItem = clickItem;
         vm.clearSearch = clearSearch;
-        vm.handleKeyUp = handleKeyUp;
+        vm.handleKeyDown = handleKeyDown;
         vm.closeSearch = closeSearch;
         vm.focusSearch = focusSearch;
         
         //we need to capture the focus before this element is initialized.
         vm.focusBeforeOpening = focusService.getLastKnownFocus();
 
+        vm.activeResult = null;
+        vm.activeResultGroup = null;
+
         function onInit() {
             vm.searchQuery = "";
             vm.searchResults = [];
@@ -72,14 +75,66 @@
          * Handles all keyboard events
          * @param {object} event
          */
-        function handleKeyUp(event) {
-            
-            event.stopPropagation();
-            event.preventDefault();
+        function handleKeyDown(event) {
             
             // esc
             if(event.keyCode === 27) {
+                event.stopPropagation();
+                event.preventDefault();
+                
                 closeSearch();
+                return;            
+            }
+
+            // up/down (navigate search results)
+            if (vm.hasResults && (event.keyCode === 38 || event.keyCode === 40)) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var allGroups = _.values(vm.searchResults);
+                var down = event.keyCode === 40;
+                if (vm.activeResultGroup === null) {
+                    // it's the first time navigating, pick the appropriate group and result 
+                    // - first group and first result when navigating down
+                    // - last group and last result when navigating up
+                    vm.activeResultGroup = down ? _.first(allGroups) : _.last(allGroups);
+                    vm.activeResult = down ? _.first(vm.activeResultGroup.results) : _.last(vm.activeResultGroup.results);
+                }
+                else if (down) {
+                    // handle navigation down through the groups and results
+                    if (vm.activeResult === _.last(vm.activeResultGroup.results)) {
+                        if (vm.activeResultGroup === _.last(allGroups)) {
+                            vm.activeResultGroup = _.first(allGroups);
+                        }
+                        else {
+                            vm.activeResultGroup = allGroups[allGroups.indexOf(vm.activeResultGroup) + 1];
+                        }
+                        vm.activeResult = _.first(vm.activeResultGroup.results);
+                    }
+                    else {
+                        vm.activeResult = vm.activeResultGroup.results[vm.activeResultGroup.results.indexOf(vm.activeResult) + 1];
+                    }
+                }
+                else {
+                    // handle navigation up through the groups and results
+                    if (vm.activeResult === _.first(vm.activeResultGroup.results)) {
+                        if (vm.activeResultGroup === _.first(allGroups)) {
+                            vm.activeResultGroup = _.last(allGroups);
+                        }
+                        else {
+                            vm.activeResultGroup = allGroups[allGroups.indexOf(vm.activeResultGroup) - 1];
+                        }
+                        vm.activeResult = _.last(vm.activeResultGroup.results);
+                    }
+                    else {
+                        vm.activeResult = vm.activeResultGroup.results[vm.activeResultGroup.results.indexOf(vm.activeResult) - 1];
+                    }
+                }
+
+                $timeout(function () {
+                    var resultElementLink = angular.element(".umb-search-item[active-result='true'] .umb-search-result__link");
+                    resultElementLink[0].focus();
+                });
             }
         }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
index 56d9eae16c..35bf725e0a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
@@ -1,5 +1,5 @@
 
-<div class="umb-search" on-outside-click="vm.closeSearch()" ng-keyup="vm.handleKeyUp($event)">
+<div class="umb-search" on-outside-click="vm.closeSearch()" ng-keydown="vm.handleKeyDown($event)">
 
     <div class="flex items-center">
         <i class="umb-search-input-icon icon-search" ng-click="vm.focusSearch()"></i>
@@ -18,7 +18,7 @@
         <div class="umb-search-group" ng-repeat="(key, group) in vm.searchResults">
             <div class="umb-search-group__title">{{key}}</div>
             <ul class="umb-search-items">
-                <li class="umb-search-item" ng-repeat="result in group.results">
+                <li class="umb-search-item" ng-repeat="result in group.results" active-result="{{result === vm.activeResult}}">
                     <a class="umb-search-result__link" ng-href="#/{{result.editorPath}}" ng-click="vm.clickItem(result)">
                         <i class="umb-search-result__icon {{result.icon}}"></i>
                         <span class="umb-search-result__meta">
@@ -31,4 +31,4 @@
         </div>
     </div>
 
-</div>
\ No newline at end of file
+</div>