[technige]

The box at the top of the left navigation on API pages now reads Type ❲/❳ to explore API, and it gets an accessible name and hover text.

Affects: Site UI, API reference

Prompt summary: Reword the placeholder of the API navigation box that #4511 made focusable with /. Use "type" and "explore" in place of "press" and "find", and decide what the hover text should say and whether it works for accessibility.

Why

Not every keyboard has / as a primary key. A German layout needs Shift+7, so "press /" misleads, while "type /" matches GitHub's wording. "Find" understates the box. Its query matches operation titles, IDs, methods and paths, and it also matches description and parameter text. "Find" also overlaps with Ctrl+F, the browser's on-page find. "Explore" fits the range of what the box does without that overlap.

The wording avoids "search" on purpose, because that word already means the site-wide search or an internet search. The three words now split cleanly: "find" for browser on-page find, "search" for site search, and "explore" for this box.

The input had no accessible name beyond its placeholder, which disappears once you type. The ❲/❳ brackets are ornamental and screen readers read them poorly, so the name and hover text leave them out.

What

Placeholder wording

The placeholder for type="api" is Type ❲/❳ to explore API, with the brackets kept. The existing tests use the new string. The all-APIs landing page uses the same box, so it shows the new wording too.

Accessible name and hover text

The api input now has aria-label="Explore API" and a title of Explore API operations. Type / to focus.. The name contains the visible words "explore API", so voice-control users can address the box by its label. The title becomes the accessible description. It names no searched fields, so it stays correct as the search improves. A new test finds the input by its name and checks the title.

The s key

Typing s outside a text field focuses the box, as / does, with the same modifier and text-field guards. A capital S is ignored. The placeholder still names only /, and aria-keyshortcuts lists both keys.

Documentation

docs/data/openapi/api-explorer.md covers both the sidebar box and the landing page box. It identifies the box by its position and label rather than giving it a name. "API Explorer" is the internal name of the module, so the page no longer says "finder" or "filter box". The sentence no longer says the box matches "by title".

Verify

cd src/Elastic.Documentation.Site
npm run test -- NavigationSearch
npm run compile:check
npm run lint

Check on the preview

• All APIs landing page — the hero box reads Type ❲/❳ to explore API, and both / and s focus it.

• Elasticsearch: Delete async search — the left navigation box reads Type ❲/❳ to explore API, and hovering it shows the title. Typing / focuses it.

Out of scope: The placeholder colour is textDisabled and probably fails the 4.5:1 contrast ratio. That predates this change and needs its own measurement. The docs-type input ("Jump to page") gets no aria-label or title here.

🤖 Generated with Claude Code

[github-actions]

Docs preview (local build)

Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4546/

Sample changed pages:

• docs/data/openapi/api-explorer.md

[akira28]

would it also change the landing page with all the APIs? Also, could we add s like github?

[technige]

@akira28 Not sure about the landing page. We can add "S" - it might be useful for familiarity too. Though I think GitHub doesn't mention it in the placeholder, so we can just capture the keypress in the same way.

[akira28]

@akira28 Not sure about the landing page. We can add "S" - it might be useful for familiarity too. Though I think GitHub doesn't mention it in the placeholder, so we can just capture the keypress in the same way.

👌

[technige]

@akira28 Claude here, replying on Nigel's behalf. Correction: my first version of this comment was wrong about two boxes, and I have rewritten it.

Does the landing page change? Yes. The all-APIs landing page hero renders the same <navigation-search type="api"> component as the sidebar, so it picks up the new placeholder, aria-label, title and the / shortcut with no extra change.

How many boxes? One. The landing page uses _CatalogLayout, which has no sidebar, so the hero box is the only one on the page. I first said there were two because I assumed it shared _Layout with the other API pages, and I did not check the rendered page. Nigel and Jan confirmed there is one box and that / focuses it.

On the s key: the plan is to include it in this PR, captured in the same way as / and left out of the placeholder, as Nigel said above.