Make MSearchSelect (aka loop button selection of search type) keyboard accessible.

Author: SergeyRyabinin

src/htmlgen.cpp

@@ -75,8 +75,9 @@ static void writeClientSearchBox(TextStream &t,const QCString &relPath)
 {
   t << "        <div id=\"MSearchBox\" class=\"MSearchBoxInactive\">\n";
   t << "        <span class=\"left\">\n";
-  t << "          <span id=\"MSearchSelect\" ";
+  t << "          <span id=\"MSearchSelect\" tabindex=\"0\" ";
   t << "               onmouseover=\"return searchBox.OnSearchSelectShow()\" ";
+  t << "               onclick=\"return searchBox.OnSearchSelectShow()\" ";
   t << "               onmouseout=\"return searchBox.OnSearchSelectHide()\">&#160;</span>\n";
   t << "          <input type=\"text\" id=\"MSearchField\" value=\"\" placeholder=\""
     << theTranslator->trSearch() << "\" accesskey=\"S\"\n";
@@ -1436,7 +1437,7 @@ void HtmlGenerator::writeSearchInfoStatic(TextStream &t,const QCString &)
   if (searchEngine && !serverBasedSearch)
   {
     t << "<!-- window showing the filter options -->\n";
-    t << "<div id=\"MSearchSelectWindow\"\n";
+    t << "<div id=\"MSearchSelectWindow\" tabindex=\"0\"\n";
     t << "     onmouseover=\"return searchBox.OnSearchSelectShow()\"\n";
     t << "     onmouseout=\"return searchBox.OnSearchSelectHide()\"\n";
     t << "     onkeydown=\"return searchBox.OnSearchSelectKey(event)\">\n";

templates/html/htmlbase.tpl

@@ -217,7 +217,7 @@ $(document).ready(function(){initNavTree('{{ page.fileName }}{% if page_postfix
 {% block searchInfo %}
 {% if config.SEARCHENGINE and not config.SERVER_BASED_SEARCH %}
 <!-- window showing the filter options -->
-<div id="MSearchSelectWindow"
+<div id="MSearchSelectWindow tabindex="0""
      onmouseover="return searchBox.OnSearchSelectShow()"
      onmouseout="return searchBox.OnSearchSelectHide()"
      onkeydown="return searchBox.OnSearchSelectKey(event)">

templates/html/search.js

@@ -99,6 +99,7 @@ function SearchBox(name, resultsPath, extension)
   this.searchIndex           = 0;
   this.searchActive          = false;
   this.extension             = extension;
+  this.ignoreNextEscKeyUp    = false;
 
   // ----------- DOM Elements
 
@@ -196,6 +197,11 @@ function SearchBox(name, resultsPath, extension)
     else if (e.keyCode==27) // Escape out of the search field
     {
       e.stopPropagation();
+      if (this.ignoreNextEscKeyUp)
+      {
+        this.ignoreNextEscKeyUp = false;
+        return;
+      }
       this.DOMSearchField().blur();
       this.DOMPopupSearchResultsWindow().style.display = 'none';
       this.DOMSearchClose().style.display = 'none';
@@ -291,6 +297,10 @@ function SearchBox(name, resultsPath, extension)
     else if (e.keyCode==13 || e.keyCode==27)
     {
       e.stopPropagation();
+      if (e.keyCode==27)
+      {
+        this.ignoreNextEscKeyUp = true;
+      }
       this.OnSelectItem(this.searchIndex);
       this.CloseSelectionWindow();
       this.DOMSearchField().focus();
@@ -304,6 +314,7 @@ function SearchBox(name, resultsPath, extension)
   this.CloseResultsWindow = function()
   {
     this.DOMPopupSearchResultsWindow().style.display = 'none';
+    this.DOMPopupSearchResultsWindow().style.tabindex = '-1';
     this.DOMSearchClose().style.display = 'none';
     this.Activate(false);
   }
@@ -820,5 +831,22 @@ function init_search()
     results.appendChild(link);
   }
   searchBox.OnSelectItem(0);
+
+
+  var input = document.getElementById("MSearchSelect");
+  var searchSelectWindow = document.getElementById("MSearchSelectWindow");
+
+  input.addEventListener("keypress", function(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (searchSelectWindow.style.display == 'block') {
+        this.CloseSelectionWindow();
+        this.DOMSearchField().focus();
+      } else {
+        searchBox.OnSearchSelectShow();
+        searchSelectWindow.focus();
+      }
+    }
+  });
 }
 /* @license-end */