Make Search bar more accessible #9593

4 files changed, 14 insertions, 5 deletions

diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js b/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js
index 9e1fefba82..8c06aa7432 100644
--- a/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.controller.js
@@ -16,6 +16,9 @@
         this.sitesModel = siteSelectorModel;
 
         this.onKeypress = function (event) {
+            var areSearchResultsDisplayed = $scope.search && $scope.search.term && $scope.view && $scope.view.searchActive;
+            var isTabKey = 9 == event.which
+
             if (38 == event.which) {
                 $scope.highlightPreviousItem();
                 event.preventDefault();
@@ -24,6 +27,8 @@
                 event.preventDefault();
             } else if (13 == event.which) {
                 $scope.clickQuickAccessMenuItem();
+            } else if (isTabKey && areSearchResultsDisplayed) {
+                $scope.deactivateSearch();
             }
         };
 
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html
index 107e2eb8e4..1df60aae03 100644
--- a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.html
@@ -1,9 +1,13 @@
-<div class="quick-access" title="{{ quickAccessTitle }}"
+<div class="quick-access"
      ng-class="{active: view.searchActive, expanded: view.searchActive}"
      piwik-focus-anywhere-but-here="view.searchActive = false;">
+    <!--Testing-->
+    <label for="s" style="display:none"></label>
     <span class="icon-search" ng-hide="search.term || view.searchActive"
           ng-mouseenter="view.searchActive=true"></span>
-    <input ng-keydown="quickAccess.onKeypress($event)"
+    <input class="s"
+           title="{{ quickAccessTitle }}"
+           ng-keydown="quickAccess.onKeypress($event)"
            ng-change="view.searchActive=true;quickAccess.searchMenu(search.term)"
            ng-focus="view.searchActive=true"
            ng-model="search.term" piwik-focus-if="view.searchActive"
@@ -33,4 +37,4 @@
             ng-click="quickAccess.selectSite(site.idsite)"
             ng-repeat="site in quickAccess.sitesModel.sites"><a ng-bind-html="site.name"></a></li>
     </ul>
-</div>
\ No newline at end of file
+</div>
diff --git a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
index 35df1d2ef0..e57d1b01b0 100644
--- a/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
+++ b/plugins/CoreHome/angularjs/quick-access/quick-access.directive.js
@@ -279,4 +279,4 @@
             }
         };
     }
-})();
\ No newline at end of file
+})();
diff --git a/plugins/CoreHome/lang/en.json b/plugins/CoreHome/lang/en.json
index 8cb3569a97..ee83a21dfb 100644
--- a/plugins/CoreHome/lang/en.json
+++ b/plugins/CoreHome/lang/en.json
@@ -50,7 +50,7 @@
         "ClickRowToExpandOrContract": "Click this row to expand or contract the subtable.",
         "UndoPivotBySubtable": "This report has been pivoted %s Undo pivot",
         "PivotBySubtable": "This report is not pivoted %s Pivot by %s",
-        "QuickAccessTitle": "Search for %s. Shortcut: Press 'f' to search.",
+        "QuickAccessTitle": "Search for %s. Use the arrow keys to navigate through search results. Shortcut: Press 'f' to search.",
         "MenuEntries": "Menu entries",
         "Segments": "Segments",
         "AdblockIsMaybeUsed": "In case you are using an ad blocker, please disable it for this site to make sure Piwik works without any issues.",