Serach enhancement refinement

css/_search.less

@@ -211,6 +211,10 @@
             outline: none;
         }
 
+        ul.search-suggestions li.is-tabbed > a {
+            box-shadow: inset 0 0 0 1px @ini_border;
+        }
+
         ul.search-suggestions li.is-loading,
         ul.search-suggestions li.is-empty {
             padding: .15em .25em;

css/design.less

@@ -143,7 +143,7 @@ form.search {
     }
 
     button {
-        background: transparent url(images/search.png) no-repeat 0 0;
+        background: transparent no-repeat 0 0;
         border-width: 0;
         width: 19px;
         height: 14px;

script.js

@@ -104,6 +104,7 @@ jQuery(function(){
         var curRequest = null;
         var items = [];
         var activeIndex = -1;
+        var lastNavigation = null;
         var listId = 'qsearch__listbox';
 
         $form
@@ -127,6 +128,7 @@ jQuery(function(){
 
         function clearActive() {
             activeIndex = -1;
+            lastNavigation = null;
             $input.removeAttr('aria-activedescendant');
         }
 
@@ -200,7 +202,7 @@ jQuery(function(){
 
         function updateActive() {
             var $options = $output.find('li[data-index]');
-            $options.removeClass('is-active').attr('aria-selected', 'false');
+            $options.removeClass('is-active is-tabbed').attr('aria-selected', 'false');
 
             if (activeIndex < 0 || activeIndex >= items.length) {
                 clearActive();
@@ -209,13 +211,17 @@ jQuery(function(){
 
             var $active = $options.filter('[data-index="' + activeIndex + '"]');
             $active.addClass('is-active').attr('aria-selected', 'true');
+            if (lastNavigation === 'tab') {
+                $active.addClass('is-tabbed');
+            }
             $input.attr('aria-activedescendant', $active.attr('id'));
         }
 
-        function moveActive(delta) {
+        function moveActive(delta, source) {
             if (!items.length) {
                 return;
             }
+            lastNavigation = source || null;
             if (activeIndex < 0) {
                 activeIndex = delta > 0 ? 0 : items.length - 1;
             } else {
@@ -349,19 +355,19 @@ jQuery(function(){
 
             if (key === 'ArrowDown') {
                 event.preventDefault();
-                moveActive(1);
+                moveActive(1, 'arrow');
                 return;
             }
 
             if (key === 'ArrowUp') {
                 event.preventDefault();
-                moveActive(-1);
+                moveActive(-1, 'arrow');
                 return;
             }
 
             if (key === 'Tab') {
                 event.preventDefault();
-                moveActive(event.shiftKey ? -1 : 1);
+                moveActive(event.shiftKey ? -1 : 1, 'tab');
                 return;
             }
 
@@ -374,6 +380,7 @@ jQuery(function(){
 
         $output.on('mouseenter', 'li[data-index]', function () {
             activeIndex = parseInt(jQuery(this).attr('data-index'), 10);
+            lastNavigation = 'mouse';
             updateActive();
         });