Add "/" keyboard shortcut to open search overlay (#62221)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: heiskr

src/fixtures/tests/playwright-rendering.spec.ts

@@ -52,6 +52,41 @@ test('use sidebar to go to Hello World page', async ({ page }) => {
   await expect(page).toHaveTitle(/Hello World - GitHub Docs/)
 })
 
+test('press "/" to open the search overlay', async ({ page }) => {
+  await page.goto('/')
+  await turnOffExperimentsInPage(page)
+
+  // Wait for the header search button to render, so the keydown listener is attached.
+  await page.locator('[data-testid="search"]:visible').waitFor()
+
+  const searchInput = page.getByTestId('overlay-search-input')
+  // The overlay (and its input) is not in the DOM until it's opened.
+  await expect(searchInput).toHaveCount(0)
+
+  // Pressing "/" anywhere on the page opens the overlay and focuses the input.
+  await page.keyboard.press('/')
+  await expect(searchInput).toBeFocused()
+
+  // Escape closes it again.
+  await page.keyboard.press('Escape')
+  await expect(searchInput).toHaveCount(0)
+})
+
+test('"/" typed inside the search input is a literal slash', async ({ page }) => {
+  await page.goto('/')
+  await turnOffExperimentsInPage(page)
+
+  await page.locator('[data-testid="search"]:visible').waitFor()
+
+  await page.keyboard.press('/')
+  const searchInput = page.getByTestId('overlay-search-input')
+  await expect(searchInput).toBeFocused()
+
+  // The "/" shortcut must not fire while typing in a field, so it is not swallowed.
+  await page.keyboard.type('a/b')
+  await expect(searchInput).toHaveValue('a/b')
+})
+
 test('do a search from home page and click on "Foo" page', async ({ page }) => {
   test.skip(!SEARCH_TESTS, 'No local Elasticsearch, no tests involving search')
 

src/frame/components/page-header/Header.tsx

@@ -92,6 +92,32 @@ export const Header = () => {
     return () => window.removeEventListener('keydown', close)
   }, [])
 
+  // Pressing "/" anywhere on the page opens the search overlay, matching the
+  // shortcut on github.com. Ignore the key when the user is typing in a form
+  // field or editable element so we never swallow a literal "/", and when a
+  // modifier is held so we don't clash with browser or OS shortcuts.
+  useEffect(() => {
+    const openOnSlash = (e: KeyboardEvent) => {
+      if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey) {
+        return
+      }
+      const target = e.target as HTMLElement | null
+      const tagName = target?.tagName
+      if (
+        tagName === 'INPUT' ||
+        tagName === 'TEXTAREA' ||
+        tagName === 'SELECT' ||
+        target?.isContentEditable
+      ) {
+        return
+      }
+      e.preventDefault()
+      setIsSearchOpen(true)
+    }
+    window.addEventListener('keydown', openOnSlash)
+    return () => window.removeEventListener('keydown', openOnSlash)
+  }, [])
+
   // For the UI in smaller browser widths, focus the picker menu button when
   // the sidebar is closed (not when the search overlay is closed — the
   // overlay's returnFocusRef handles focus restoration to the search button).