MA-owned presentation

Using Hostel Search inside a modal

HI supplies the functional search component. The Member Association owns the launcher, dialog presentation, accessible title, focus containment, close behaviour and page scroll locking.

Live production component

Test the supported interaction

Open the MA-owned modal, focus the search and press Escape. The first Escape closes the active search layer; a second Escape closes the modal.

Required modal semantics

Use a native open <dialog>, or an element with role="dialog" and aria-modal="true".
Associate the dialog with a visible title.
Keep keyboard focus inside the open modal.
Restore focus to the MA launcher when the modal closes.

Closing safely

Call closeSearch() before an MA close button, backdrop or framework hides the modal. The widget also detects native dialog close events and common hidden or ARIA state changes.

function closeModal() {
  search.closeSearch();
  modal.hidden = true;
  launcher.focus();
}

Do not duplicate the search UI

Use the standard <hi-hostel-search> element inside the modal. HI does not provide or control the modal launcher, heading typography or surrounding shell.

Required QA

Test keyboard focus, Escape and the visible close button.
Test backdrop closing if the MA enables it.
Test a real mobile device with the keyboard open.
Confirm reopening the modal restores a usable search.

Search element inside the MA dialog

<div role="dialog"
     aria-modal="true"
     aria-labelledby="international-hostel-title"
     hidden>
  <h2 id="international-hostel-title">Find an international hostel</h2>
  <button type="button" aria-label="Close">×</button>

  <hi-hostel-search
    index-url="https://data.hihostels.com/v1/locations.json"
    search-url="https://widgets.hihostels.com/go/hostels"
    locale="en-GB"
    partner="YOUR_MA_CODE"
    target="_blank">
    <a href="https://www.hihostels.com/discover/explore">Search HI hostels</a>
  </hi-hostel-search>
</div>