Skip to content

Show a hint for documentation-scoped search - #2713

Open
Vam-si-krish wants to merge 1 commit into
freeCodeCamp:mainfrom
Vam-si-krish:feat/search-scope-hint
Open

Show a hint for documentation-scoped search#2713
Vam-si-krish wants to merge 1 commit into
freeCodeCamp:mainfrom
Vam-si-krish:feat/search-scope-hint

Conversation

@Vam-si-krish

Copy link
Copy Markdown

Summary

  • show a contextual keyboard hint when the search text matches an enabled documentation
  • label the shortcut as Tab on desktop and Space on mobile
  • clear the hint when the search is scoped or reset, while reserving enough input space to prevent overlap
  • add regression coverage for matching and clearing the hint

Testing

  • bundle exec rake (743 runs, 945 assertions)
  • node --test test/assets/search_hash_test.js
  • manually verified the Ruby 4.0 flow in a desktop browser, including hint display, Tab activation, and hint clearing

Closes #1517

@Vam-si-krish
Vam-si-krish requested a review from a team as a code owner July 29, 2026 22:58
@simon04
simon04 requested a review from Copilot July 30, 2026 18:36

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This PR adds a contextual UI hint to help users discover documentation-scoped search (Tab on desktop, Space on mobile) when the current query matches an enabled documentation, and clears that hint when the scope changes or resets.

Changes:

  • Adds a search hint element in the header and associates it to the search input via aria-describedby.
  • Implements hint discovery/show/hide behavior in SearchScope, including input padding adjustments to avoid overlap.
  • Adds a regression test covering hint matching and clearing behavior.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File Description
views/app.erb Adds the hint DOM element and connects it to the search input via aria-describedby.
assets/stylesheets/components/_header.scss Styles the new hint overlay within the search form.
assets/javascripts/views/search/search_scope.js Adds hint matching/search logic and clears hint on scope/reset.
test/assets/search_hash_test.js Adds regression coverage for hint display and clearing behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +90 to +91
this.hint.style.display = "block";
this.input.style.paddingRight = this.hint.offsetWidth + 28 + "px";
Comment on lines +32 to +36
this.hintSearcher = new app.SynchronousSearcher({
fuzzy_min_length: 2,
max_results: 1,
});
this.hintSearcher.on("results", (results) => this.onHintResults(results));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants