Search docs with S instead of /

It turns out / on Firefox is already search,
and we don't want to override that.

Also adds a tip to make the shortcut discoverable.
This commit is contained in:
Richard Feldman 2022-10-09 04:26:00 -04:00
parent 04bceae956
commit 34f56371f7
No known key found for this signature in database
GPG key ID: F1F21AA5B1D9E43B
3 changed files with 11 additions and 7 deletions

View file

@ -15,7 +15,7 @@
<body>
<nav id="sidebar-nav">
<input id="module-search" aria-labelledby="search-link" type="text" placeholder="Search" />
<label for="module-search" id="search-link">Search</label>
<label for="module-search" id="search-link"><span id="search-link-text">Search</span> <span id="search-link-hint">(shortcut: S)</span></label>
<div class="module-links">
<!-- Module links -->
</div>

View file

@ -45,20 +45,18 @@
search();
// Capture '/' keypress for quick search
// Capture '/' keypress for quick search
window.addEventListener("keyup", (e) => {
if (e.code === "Slash") {
if (e.key === "s") {
e.preventDefault;
searchBox.focus();
searchBox.value = "";
}
if (e.code === "Escape" && document.activeElement === searchBox) {
if (e.key === "Escape" && document.activeElement === searchBox) {
e.preventDefault;
searchBox.blur();
}
});
})();

View file

@ -446,10 +446,16 @@ pre {
cursor: pointer;
}
#search-link:hover {
#search-link:hover #search-link-text {
text-decoration: underline;
}
#search-link-hint {
font-style: italic;
margin-left: 1em;
opacity: 0.7;
}
@media (prefers-color-scheme: dark) {
:root {
--body-bg-color: var(--purple-8);