Better control of the order of items on the page

[peteryates]

Currently the suggested way to build pages is via the wizardry_content helper. This means that if you set your heading above the helper, the <h1> will appear before the error summary.

The two approaches we can use to fix this are:

Make wizardry_content cleverer

Form pages that follow the GOV.UK design system tend to have one or two questions per page. When there's one question, sometimes the <h1> is the input's label or legend. For example, in the checkbox documentation the heading is set like this:

<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
  <h1 class="govuk-fieldset__heading">
    Which types of waste do you transport?
  </h1>
</legend>

On other pages the heading is set first and the questions follow.

Correctly-positioning the error summary would mean that we need to allow render_form to take care of rendering the heading - it would need to be able to determine whether or not the heading will be rendered as a separate <h1> or if it'll be formed from the first field label or legend.

Allow the content to be rendered bit by bit

Another approach would be to expose some of the functionality that render_form uses and give writers the ability to add the parts of a page individually. Something along the lines of:

<%= wizardry_page(@wizard) do |w| %>
  <%= w.back_button %>
  <%= w.error_summary %>
  <%= tag.h1(@wizard.current_page.title, class: "govuk-heading-l") %>
  <%= w.form %>
<% end %>

This would need to be done on a page-by-page basis when forms have a mix of pages where the heading is set via a label or legend or standalone.

Refs DFE-Digital/find-a-lost-trn/pull/23

[tvararu]

I really like the bit by bit option, as it also allows opting in/out of functionality like the back button. 👍