Merge pull request #2698 from traviscross/TC/search-ergonomics

Improve ergonomics of search

Author: ehuss

guide/src/guide/reading.md

@@ -42,14 +42,14 @@ Tapping the menu bar will scroll the page to the top.
 ## Search
 
 Each book has a built-in search system.
-Pressing the search icon (<i class="fa fa-search"></i>) in the menu bar, or pressing the `S` key on the keyboard will open an input box for entering search terms.
+Pressing the search icon (<i class="fa fa-search"></i>) in the menu bar, or pressing the <kbd>/</kbd> or <kbd>S</kbd> key on the keyboard will open an input box for entering search terms.
 Typing some terms will show matching chapters and sections in real time.
 
 Clicking any of the results will jump to that section.
 The up and down arrow keys can be used to navigate the results, and enter will open the highlighted section.
 
 After loading a search result, the matching search terms will be highlighted in the text.
-Clicking a highlighted word or pressing the `Esc` key will remove the highlighting.
+Clicking a highlighted word or pressing the <kbd>Escape</kbd> key will remove the highlighting.
 
 ## Code blocks
 

src/front-end/searcher/searcher.js

@@ -35,7 +35,7 @@ window.search = window.search || {};
         URL_SEARCH_PARAM = 'search',
         URL_MARK_PARAM = 'highlight',
 
-        SEARCH_HOTKEY_KEYCODE = 83,
+        SEARCH_HOTKEY_KEYCODES = [83, 191], // `s` or `/`.
         ESCAPE_KEYCODE = 27,
         DOWN_KEYCODE = 40,
         UP_KEYCODE = 38,
@@ -362,15 +362,22 @@ window.search = window.search || {};
             }
             showSearch(false);
             marker.unmark();
-        } else if (!hasFocus() && e.keyCode === SEARCH_HOTKEY_KEYCODE) {
+        } else if (!hasFocus() && SEARCH_HOTKEY_KEYCODES.includes(e.keyCode)) {
             e.preventDefault();
             showSearch(true);
             window.scrollTo(0, 0);
             searchbar.select();
-        } else if (hasFocus() && e.keyCode === DOWN_KEYCODE) {
+        } else if (hasFocus() && (e.keyCode === DOWN_KEYCODE
+                               || e.keyCode === SELECT_KEYCODE)) {
             e.preventDefault();
-            unfocusSearchbar();
-            searchresults.firstElementChild.classList.add('focus');
+            const first = searchresults.firstElementChild;
+            if (first !== null) {
+                unfocusSearchbar();
+                first.classList.add('focus');
+                if (e.keyCode === SELECT_KEYCODE) {
+                    window.location.assign(first.querySelector('a'));
+                }
+            }
         } else if (!hasFocus() && (e.keyCode === DOWN_KEYCODE
                                 || e.keyCode === UP_KEYCODE
                                 || e.keyCode === SELECT_KEYCODE)) {

src/front-end/templates/index.hbs

@@ -142,7 +142,7 @@
                             <li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
                         </ul>
                         {{#if search_enabled}}
-                        <button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
+                        <button id="search-toggle" class="icon-button" type="button" title="Search (`/`)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="/ s" aria-controls="searchbar">
                             <i class="fa fa-search"></i>
                         </button>
                         {{/if}}