Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Be less aggressive in maintaining focus on search box #4395

Merged
merged 2 commits into from
Oct 28, 2024
Merged

Be less aggressive in maintaining focus on search box #4395

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eeddae0
Be less aggressive in maintaining focus on search box
clydebarrow Oct 28, 2024
49e2a96
Also focus when clear clicked
clydebarrow Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions _templates/searchbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,10 +157,20 @@
resizeTarget();
}

function search_focus() {
const input_field = document.getElementById("pfmod-input-0");
if (input_field) {
requestAnimationFrame(() => input_field.focus());
}
}


function hideTargets() {
if (target.style.display !== "none") {
target.style.display = "none";
document.removeEventListener('click', clickCallback);
// keep focus on search box after clicking on search result
search_focus();
}
}

Expand Down Expand Up @@ -200,14 +210,12 @@
}
});
}
const input_field = document.getElementById("pfmod-input-0");
if (input_field) {
input_field.focus({preventScroll: true});
input_field.addEventListener("blur", () => {
requestAnimationFrame(() => {
input_field.focus({preventScroll: true});
});
})
// focus the search field on page load.
search_focus();
Comment on lines +213 to +214
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Based on the search results from previous scripts, I can now generate the final response:

Consider implementing keyboard shortcut for search focus

While focusing the search field on page load can be helpful, it might interfere with normal keyboard navigation and accessibility. Instead:

  • Add a keyboard shortcut (e.g., "/" key) to focus the search field
  • Keep the existing focus call after clicking search results
  • Remove the automatic focus on page load

This approach follows common documentation site patterns and provides better keyboard navigation experience while maintaining the quick-search functionality for users who need it.

🔗 Analysis chain

Consider a less aggressive focus approach.

While focusing the search field on page load can be helpful, it might interfere with normal keyboard navigation and accessibility. Consider focusing only when:

  • User presses "/" key (common pattern in documentation sites)
  • User clicks near the search box
  • User explicitly activates search via a button

Let's check if there are any accessibility guidelines in the project:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Look for accessibility-related documentation or guidelines
rg -i "accessibility|a11y" README.md docs/

Length of output: 90

Script:

#!/bin/bash
# Look for any existing keyboard shortcuts or search-related functionality
rg -i "search.*focus|keyboard|shortcut|keydown|keypress" -A 3 -B 3

Length of output: 17825

Script:

#!/bin/bash
# Look for any existing keyboard shortcut handlers in the search functionality
rg -i "keydown|keypress.*search|/.*key" _templates/searchbox.html -A 3 -B 3

Length of output: 77

// focus when clicking on clear button
const clears = document.getElementsByClassName("pagefind-modular-list-clear");
for (let i = 0; i !== clears.length; i++) {
clears[i].addEventListener("click", search_focus);
}
});
</script>