Hide chromes default active button outline

[brahmlower]

This change resolves #990 by removing the blue outline around the menu bar buttons. The following gif demonstrates the resulting behavior.

[ehuss]

Thanks! I imagine that is annoying in chrome. It's unfortunate that chrome behaves that way.

I'm concerned about hiding the outline outright, since it makes it more difficult to interact with the keyboard, and is a general accessibility concern.

What do you think about an approach like this? I've been fiddling on a few different browsers, and it seems to be somewhat ok.

diff --git a/src/theme/book.js b/src/theme/book.js
index ca73ee14d..f5ea8da5f 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -373,6 +373,7 @@ function playpen_text(playpen) {
     themeToggleButton.addEventListener('click', function () {
         if (themePopup.style.display === 'block') {
             hideThemes();
+            this.blur();
         } else {
             showThemes();
         }
@@ -394,6 +395,7 @@ function playpen_text(playpen) {
     document.addEventListener('click', function(e) {
         if (themePopup.style.display === 'block' && !themeToggleButton.contains(e.target) && !themePopup.contains(e.target)) {
             hideThemes();
+            themeToggleButton.blur();
         }
     });

@@ -477,6 +479,10 @@ function playpen_text(playpen) {
         }
     });

+    sidebarToggleButton.addEventListener('mouseup', function (e) {
+        this.blur();
+    });
+
     sidebarResizeHandle.addEventListener('mousedown', initResize, false);

     function initResize(e) {
diff --git a/src/theme/searcher/searcher.js b/src/theme/searcher/searcher.js
index 7fd97d487..89af58970 100644
--- a/src/theme/searcher/searcher.js
+++ b/src/theme/searcher/searcher.js
@@ -389,6 +389,7 @@ window.search = window.search || {};
             searchbar.select();
         } else {
             showSearch(false);
+            searchicon.blur();
         }
     }