feat: #3617501 Add the header search box and give the search results page a heading and one result per row

Issue: #3617501 Add the header search box and give the search results page a heading and one result per row

Depends on Vartheme BS5 Educare #3617500 / MR !28, which adds the Icon Toggle's inline bar and the search view component this recipe places and renders through.

What this changes

A search control in the header. The Canvas Header region gains an Icon Toggle in its inline-bar style, carrying the search view's exposed form. The form comes from a block_1 display of its own rather than the results page display, because turning the page display's exposed block off would otherwise remove the block the header points at. The placeholder carries the header design's wording instead of the Drupal CMS Search default, set from this recipe rather than by patching that third-party recipe.

The header Section becomes one full-width column holding a single horizontal group — branding, the main menu and the search toggle — spread apart. Educare's main menu is eight items wide (924px), which left the previous 25/75 split twelve pixels short of fitting the toggle on the same line: the toggle wrapped to a row of its own and the header grew from 74px to 130px. As one row the three parts fit with ~190px to spare, and the opened search bar covers the menu on the header's own line instead of pushing it around.

A readable results page. The page display renders its exposed form inline, under the heading the search view component prints from the view title. The index holds both nodes and Canvas pages, so the view carries one title source per entity type and builds a single linked heading from whichever is set, sized at the design system's h4 step, followed by the excerpt on .text-subtle-text. Rows are spaced with mb-5, and the view header states how many results are being shown.

Automated functional testing. A new 12-search suite (16 scenarios, 85 steps) and its own CI bucket: the toggle collapsed at rest, opening it to reveal the field, the toggle on News / Events / Programs / Privacy, searching from the header landing on /search with the query carried, exactly one <h1>, the inline filter bar between the heading and the summary, the box arriving filled in, the result summary, one heading and one link per row, refining the query in place, the empty state, and the header and footer surviving the route.

Both inputs are named keywords — one in the collapsed header panel, one in the results-page filter bar — so a bare name lookup lands on the hidden one. Three step definitions scope to the right form; a fourth reads a value through the selector registry, because Gherkin has no escape for a quote inside a quoted step argument and a selector carrying an attribute filter cannot be written inline.

Verified

Installed twice from a dropped database on Varbase 11 (drush site:install recipes/educare), with the theme MR applied:

• [success] Installation complete, 0 errors logged, both Canvas component version pins reproduce identically across the two installs
• content unchanged: 12 canvas pages, 40 events, 15 news, 20 programs, 17 media, 14 patterns
• every landmark path 200 with the toggle present and no broken blocks: /, /about, /programs, /research, /admissions, /student-life, /events, /events/past, /events/upcoming, /news, /contact-us, /privacy, /search, /search?keywords=education
• 12-search: 16 scenarios, 85 steps, all passing
• no regression across the rest of the suite: 01-website-base-requirements 53/53, 02-news 11/11, 03-events 11/11, 04-programs 12/12, 05-exposed-filters 5/5, 07-quality 69/69
• YAML lint (708 files), ESLint, cspell and the cucumber dry-run (246 scenarios, 1786 steps) all green

Two things the suite caught that this MR also fixes. The search field had no accessible name — Views renders the exposed filter with form-no-label when no label is set, so expose.label is now set and the header bar hides it visually while keeping it in the accessibility tree; that took 07-quality from 12 failures to 69/69. And the header form made form.views-exposed-form ambiguous on every page, so the listing assertions, the two selector-registry entries and the filter step now scope to main.

Checkpoints:

• File an issue
• Addition/Change/Update/Fix
• Testing to ensure no regression
• Automated unit testing coverage
• Automated functional testing coverage
• UX/UI designer responsibilities
• Readability
• Accessibility
• Performance
• Security
• Developer Documentation
• User Guide Documentation
• Reviewed by human
• Code review by maintainers
• Full testing and approval
• Credit contributors
• Review with the product owner
• Release notes snippet
• Release

AI-Generated: Yes