Use consistent header element nesting for accessibility

[sjd210]

We have historically used header elements <h1>-<h6> for styling purposes, however these elements are also important for navigation, especially for screenreaders.

According to the WCAG standards, in order to make this navigation work properly, headings should start with a single <h1> (after any navigation headings if they exist, which they don't for us), with sequentially increasing numbers for each nested subsection, and equal numbers for sections of the same rank/importance.

Most pages on both sites have violated this, so this requires quite a lot of changes to resolve, however all these changes are very straightforward. Each current <h*> element essentially falls into one of the following camps:

• Already fits into the hierarchy (e.g. <PageTitle> as our single <h1>)
  • no change
• Should be a header in the hierarchy, but is of the wrong rank (e.g. section titles on the My Account page)
  • <h3> -> <h2 className="h3">
• Should not be a header in the hierarchy at all
  • <h3> -> <div className="h3">

The only exceptions to this are:

• Modals, for which there is no consensus in WCAG or the HTML standard for whether they should start with <h1> (since a modal represents its own document) or <h2> (since it is on the same wider page as a <h1> already). I have chosen to follow Bootstrap's example and set the modal-title to <h1> and label accordingly from there, but either would do
• The question-validation-response, which was barely using <h1> for its styling anyway so a new response-heading class has been added in its place
• Some headings in the registration flow or My Account page that were using different elements per site. They now use the same element for navigation, but different classNames for styling. e.g. <h2 className={siteSpecific("h4", "h3")}>

---

(If there are any violations left, or for any that are generated in the future, they should now be individual cases that can be quickly fixed rather than a fundamental disregard for the header structure. I checked manually for non-trivial cases, but can't guarantee this caught everything - especially for elements that should be marked as headings but did not already use a <h*> tag).