commit 93eb9a73caa5fecbd8b83a2220603b7ad2c55cf7
author Jamal Carvalho <jamal@golang.org> Wed Sep 30 16:45:08 2020 -0400
committer Jamal Carvalho <jamal@golang.org> Wed Sep 30 21:18:53 2020 +0000
tree c14ceebb05817f54fc727759f23a95a5d70c3d5b
parent 211adadab808f6278d1b8905b781e6c98d7ba629

content/static: switch jump to input for button

Changes jump to input to button in sidebar to
account for keyboard navigation. Prevents modal
from opening on element focus.

Change-Id: I79515cae0338d0e0dcfadde70193346c47e5e434
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/258526
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>

content/static/css/unit_outline.css

diff --git a/content/static/css/unit_outline.css b/content/static/css/unit_outline.css
index 4a1adf7..c4c4551 100644
--- a/content/static/css/unit_outline.css
+++ b/content/static/css/unit_outline.css
@@ -49,10 +49,13 @@
   display: flex;
   margin-bottom: 0.5rem;
 }
-.UnitOutline-jumpTo input {
+.UnitOutline-jumpTo button {
+  background-color: white;
   border: 0.0625rem solid var(--gray-8);
+  cursor: pointer;
   height: 2rem;
   padding-left: 1rem;
+  text-align: left;
   width: 100%;
 }
 .UnitOutline-jumpTo::after {

content/static/html/helpers/_unit_outline.tmpl

diff --git a/content/static/html/helpers/_unit_outline.tmpl b/content/static/html/helpers/_unit_outline.tmpl
index cee8bc2..04d7c54 100644
--- a/content/static/html/helpers/_unit_outline.tmpl
+++ b/content/static/html/helpers/_unit_outline.tmpl
@@ -6,8 +6,9 @@
 
 {{define "unit_outline"}}
   <div class="UnitOutline-jumpTo">
-    <input class="js-jumpToInput" placeholder="Jump to"
-        {{if (not .DocOutline.String)}}disabled{{end}}>
+    <button class="UnitOutline-jumpToInput js-jumpToInput"{{if (not .DocOutline.String)}} disabled{{end}}>
+       Jump to
+    </button>
   </div>
   <div class="UnitOutline">
     {{if .Readme.String}}

content/static/js/jump.js

diff --git a/content/static/js/jump.js b/content/static/js/jump.js
index 41be028..45c713c 100644
--- a/content/static/js/jump.js
+++ b/content/static/js/jump.js
@@ -294,7 +294,7 @@
 
 const jumpOutlineInput = document.querySelector('.js-jumpToInput');
 if (jumpOutlineInput) {
-  jumpOutlineInput.addEventListener('focus', () => {
+  jumpOutlineInput.addEventListener('click', () => {
     jumpDialog.showModal();
   });
 }

content/static/js/jump.min.js

diff --git a/content/static/js/jump.min.js b/content/static/js/jump.min.js
index 7798825..9888123 100644
--- a/content/static/js/jump.min.js
+++ b/content/static/js/jump.min.js
@@ -42,4 +42,4 @@
 function incActiveJumpItem(b){0>activeJumpItem||(b=activeJumpItem+b,0>b&&(b=0),setActiveJumpItem(b))}jumpFilter.addEventListener("keyup",function(b){jumpFilter.value.toUpperCase()!=lastFilterValue.toUpperCase()&&updateJumpList(jumpFilter.value)});jumpFilter.addEventListener("keydown",function(b){switch(b.which){case 38:incActiveJumpItem(-1);b.preventDefault();break;case 40:incActiveJumpItem(1);b.preventDefault();break;case 13:0<=activeJumpItem&&jumpList.children[activeJumpItem].click()}});
 var shortcutsDialog=document.querySelector(".ShortcutsDialog");shortcutsDialog.showModal||dialogPolyfill.registerDialog(shortcutsDialog);
 document.addEventListener("keypress",function(b){if(!jumpDialog.open&&!shortcutsDialog.open){var c=b.target.tagName;if("INPUT"!=c&&"SELECT"!=c&&"TEXTAREA"!=c&&!(b.target.contentEditable&&"true"==b.target.contentEditable||b.metaKey||b.ctrlKey))switch(String.fromCharCode(b.which)){case "f":case "F":b.preventDefault();jumpFilter.value="";jumpDialog.showModal();updateJumpList("");break;case "?":shortcutsDialog.showModal();break;case "/":searchInput&&!window.navigator.userAgent.includes("Firefox")&&(b.preventDefault(),
-searchInput.focus())}}});var jumpOutlineInput=document.querySelector(".js-jumpToInput");jumpOutlineInput&&jumpOutlineInput.addEventListener("focus",function(){jumpDialog.showModal()});
+searchInput.focus())}}});var jumpOutlineInput=document.querySelector(".js-jumpToInput");jumpOutlineInput&&jumpOutlineInput.addEventListener("click",function(){jumpDialog.showModal()});