Search on a phone: tapping the icon should open a search field in place, not load a separate page #350

New issue

Closed

opened 2026-10-01 10:24:56 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-01 10:24:56 +00:00

Owner

Requested by the maintainer on 2026-10-01.

On a phone held upright the header has no room for the search box, so since #299 it shows a magnifying glass that is a link to the search page (templates/base.html:133-134, data-search-link, shown below lg). Tapping it loads a whole new page whose only content is a box to type in: one page load and one more tap before the first letter, and the person has left the page they were on to do it.

Asked for: on a phone, tapping the icon opens a search field where the person already is. Two ways were named, either is acceptable:

A drawer. A drawer in the Basecoat vocabulary slides in with the search field in it, focused. It has room for more than a field (recent searches, or results as they are typed, later). Postulo has no drawer component yet; #302 plans one for the help text, so the two issues would share it.
The field in the top bar. The search input is drawn in the header itself, taking the place of the Postulo logo and the instance's name for as long as it is open, with a control to close it and put them back. No new component, and the field appears where the finger just was.

The second is the smaller change and keeps the header one row high, which matters on a small screen with the keyboard up; the first is the better base if search on a phone is meant to grow. The maintainer chooses.

What it has to keep

Scripts off. The icon stays a link to core:search, which is what it is today; the field in place is what a script adds. Nothing may depend on an inline script (the content security policy allows none): the behaviour lives in static/js/app.js.
The results page is unchanged. The field submits to core:search with q, like the wide header's box (base.html:135-139).
Keyboard and screen readers. Opening moves focus into the field; Escape and the close control put the header back and return focus to the icon; the icon says whether the field is open (aria-expanded), and the field has its label. If it is a drawer, it is a dialog with a name, and focus stays inside it while it is open. The / shortcut opens it at this width, as it focuses the box at the wide one.
The phone's keyboard. type="search" with enterkeyhint="search", and text large enough that iOS does not zoom the page when the field takes focus.
Both themes, right to left, logical sides only, and target sizes as the rest of the header.
#313 (one search box, local or global): where the header's box becomes the page's own search, the phone's field does the same; #313 already says the mode goes with the phone's search wherever it moves.
The Search entry in the navigation menu (templates/partials/nav_links.html:47) should open the same thing rather than the page, so there is one way to search on a phone, not two.

Done when

A browser test at phone width taps the icon and finds a focused search field without the page having changed address; typing and submitting shows the results page for that query.
Escape, and the close control, restore the logo and the instance's name (or close the drawer) and return focus to the icon.
With scripts off the icon still opens the search page.
axe passes on the header with the field open, in both themes, and the phone-width layout tests of #299 still pass.

Requested by the maintainer on 2026-10-01. On a phone held upright the header has no room for the search box, so since #299 it shows a magnifying glass that is a link to the search page (`templates/base.html:133-134`, `data-search-link`, shown below `lg`). Tapping it loads a whole new page whose only content is a box to type in: one page load and one more tap before the first letter, and the person has left the page they were on to do it. **Asked for:** on a phone, tapping the icon opens a search field where the person already is. Two ways were named, either is acceptable: 1. **A drawer.** A drawer in the Basecoat vocabulary slides in with the search field in it, focused. It has room for more than a field (recent searches, or results as they are typed, later). Postulo has no drawer component yet; #302 plans one for the help text, so the two issues would share it. 2. **The field in the top bar.** The search input is drawn in the header itself, taking the place of the Postulo logo and the instance's name for as long as it is open, with a control to close it and put them back. No new component, and the field appears where the finger just was. The second is the smaller change and keeps the header one row high, which matters on a small screen with the keyboard up; the first is the better base if search on a phone is meant to grow. The maintainer chooses. ## What it has to keep - **Scripts off.** The icon stays a link to `core:search`, which is what it is today; the field in place is what a script adds. Nothing may depend on an inline script (the content security policy allows none): the behaviour lives in `static/js/app.js`. - **The results page is unchanged.** The field submits to `core:search` with `q`, like the wide header's box (`base.html:135-139`). - **Keyboard and screen readers.** Opening moves focus into the field; Escape and the close control put the header back and return focus to the icon; the icon says whether the field is open (`aria-expanded`), and the field has its label. If it is a drawer, it is a dialog with a name, and focus stays inside it while it is open. The `/` shortcut opens it at this width, as it focuses the box at the wide one. - **The phone's keyboard.** `type="search"` with `enterkeyhint="search"`, and text large enough that iOS does not zoom the page when the field takes focus. - **Both themes, right to left, logical sides only**, and target sizes as the rest of the header. - **#313** (one search box, local or global): where the header's box becomes the page's own search, the phone's field does the same; #313 already says the mode goes with the phone's search wherever it moves. - The *Search* entry in the navigation menu (`templates/partials/nav_links.html:47`) should open the same thing rather than the page, so there is one way to search on a phone, not two. ## Done when - A browser test at phone width taps the icon and finds a focused search field without the page having changed address; typing and submitting shows the results page for that query. - Escape, and the close control, restore the logo and the instance's name (or close the drawer) and return focus to the icon. - With scripts off the icon still opens the search page. - axe passes on the header with the field open, in both themes, and the phone-width layout tests of #299 still pass.

tiagoagueda added this to the 0.5.0 milestone

2026-10-01 10:24:56 +00:00

tiagoagueda added the

enhancement

accessibility

interface

labels

2026-10-01 10:24:56 +00:00

tiagoagueda referenced this issue from a commit

2026-10-04 21:43:06 +00:00

Open the phone search field in the masthead

tiagoagueda closed this issue