Add keyboard shortcut to focus search field (#31702)

* Documentation: Add slash key event to focus the input search.

* Add little tag for keyboard shortcut in the search field

* Use ctrl / as keyboard shortcut

* Update search.js

Co-authored-by: chuckrincon <chuckrincon@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>

2 files changed, 37 insertions, 3 deletions

diff --git a/site/assets/js/search.js b/site/assets/js/search.js
index bb97c5cf80..823dcb10a7 100644
--- a/site/assets/js/search.js
+++ b/site/assets/js/search.js
@@ -12,6 +12,13 @@
   var inputElement = document.getElementById('search-input')
   var siteDocsVersion = inputElement.getAttribute('data-docs-version')
 
+  document.addEventListener('keydown', function (event) {
+    if (event.ctrlKey && event.key === '/') {
+      event.preventDefault()
+      inputElement.focus()
+    }
+  })
+
   function getOrigin() {
     var location = window.location
     var origin = location.origin
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index 566bc17fdc..c23d96a49b 100644
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -25,9 +25,36 @@
 }
 
 .bd-search {
-  .form-control:focus {
-    border-color: $bd-purple-bright;
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  position: relative;
+
+  &::after {
+    position: absolute;
+    top: .4rem;
+    right: .4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    padding-right: .25rem;
+    padding-left: .25rem;
+    @include font-size(.75rem);
+    color: $gray-600;
+    content: "Ctrl + /";
+    border: $border-width solid $border-color;
+    @include border-radius(.125rem);
+  }
+
+  @include media-breakpoint-down(md) {
+    width: 100%;
+  }
+
+  .form-control {
+    padding-right: 3.75rem;
+
+    &:focus {
+      border-color: $bd-purple-bright;
+      box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+    }
   }
 }