fix: o-overlay, which to a h2 header

Typically one h1 on a page helps create a navigatable structure.
There Is No Document Outline Algorithm.
https://adrianroselli.com/2016/08/there-is-no-document-outline-algorithm.html#Update10

But I wasn't sure what the right answer is now we have `aria-modal` that can trap focus and mark other elements as inert, and went on a little side quest.

Turns out W3C's APG Task Force (ARIA Authoring Practices Guide) discussed this in a meeting a few years ago.
w3c/aria-practices#551 (comment)

They concluded:

- It is helpful if there is a consistent approach across dialogs in an application.
- There is not necessarily a need for the APG to prescribe a specific approach.

So, I guess provided you're in a modal either h1 or h2 is fine.

APG continue to use h2 in their example and Material UI are undecided, with some interesting back and fourth on when a h1 or h2 might be a better experience.

Probably, it's not a big deal either way. If I had to pick a global rule based on the above and no access to direct user testing for this, I'd go with h2.

Here it is. A quick PR to switch to a h2.

This was prompted by a user question in the support Slack channel.
https://financialtimes.slack.com/archives/C02FU5ARJ/p1696242420071219

components/o-overlay/src/js/overlay.js

@@ -302,9 +302,7 @@ class Overlay {
 				heading.appendChild(button);
 			}
 
-			const title = document.createElement('span');
-			title.setAttribute('role', 'heading');
-			title.setAttribute('aria-level', '1');
+			const title = document.createElement('h2');
 			title.className = 'o-overlay__title';
 			title.innerHTML = this.opts.heading.title;
 			title.setAttribute('id', headingId);

components/o-overlay/src/scss/_mixins.scss

@@ -29,8 +29,12 @@
 		opacity: 1;
 		transition: opacity 0.3s ease-in-out;
 	}
+	.o-overlay__heading,
+	.o-overlay__title {
+		@include oTypographySans($scale: 2, $weight: 'regular');
+	}
+
 	.o-overlay__heading {
-		@include oTypographySans($scale: 2, $include-font-family: false);
 		margin: 0;
 		overflow: hidden;
 		background: _oOverlayGet('heading-background');