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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Search hint for new users

2 participants