search-form.hbs

<form
  local-class="form {{if (eq @size "big") "size-big"}}"
  action="/search"
  role="search"
  autocapitalize="off"
  autocomplete="off"
  autocorrect="off"
  spellcheck="false"
  data-test-search-form
  ...attributes
  {{on "submit" (prevent-default this.search)}}
>
  {{! template-lint-disable require-input-label}}
  {{! disabled due to https://github.com/ember-template-lint/ember-template-lint/issues/2141 }}

  {{! template-lint-disable no-autofocus-attribute}}
  {{! disabled because this is a "form field that serves as the main purpose of the page" }}
  {{! see https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-autofocus-attribute.md }}

  <input
    type="text"
    inputmode="search"
    local-class="input-lg"
    name="q"
    id="cargo-desktop-search"
    placeholder="Type 'S' or '/' to search"
    value={{this.header.searchValue}}
    oninput={{this.updateSearchValue}}
    autofocus={{@autofocus}}
    required
    aria-label="Search"
    data-test-search-input
  >

  {{! Second input fields for narrow screens because CSS does not allow us to change the placeholder }}
  <input
    type="text"
    inputmode="search"
    local-class="input-sm"
    name="q"
    placeholder="Search"
    value={{this.header.searchValue}}
    oninput={{this.updateSearchValue}}
    required
    aria-label="Search"
  >

  <button type="submit" local-class="submit-button">
    <span local-class="submit-label">Submit</span>
    {{svg-jar "search" local-class="submit-icon"}}
  </button>

  {{on-key 's' (focus '#cargo-desktop-search')}}
  {{on-key 'S' (focus '#cargo-desktop-search')}}
  {{on-key 'shift+s' (focus '#cargo-desktop-search')}}
  {{on-key '/' (focus '#cargo-desktop-search')}}
</form>