diff --git a/css/_search.less b/css/_search.less index eaf1481..848f8ae 100755 --- a/css/_search.less +++ b/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; diff --git a/css/design.less b/css/design.less index e295327..42f468f 100755 --- a/css/design.less +++ b/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; diff --git a/images/search.png b/images/search.png deleted file mode 100755 index a07a721..0000000 Binary files a/images/search.png and /dev/null differ diff --git a/script.js b/script.js index 1c068a1..40afc40 100755 --- a/script.js +++ b/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(); });