Error notification label a11y

[ppvg]

From independent accessibility report, SC 1.3.2:

Op pagina components/notification-error.html staan voorbeelden van foutmeldingen. Bij het blokelement staat de tekst "Foutmelding:" boven de kop. Dit is een probleem, omdat hiermee in de code niet duidelijk is dat deze tekst bij deze kop hoort. Zorg er daarom bijvoorbeeld voor dat deze tekst onderdeel van de kop wordt of onder de kop komt te staan. Visueel mag de volgorde dan hetzelfde blijven.

The error notification div example in the docs has a heading. This means that, if an AT user navigates by headings, the <span>Error:</span> is skipped and it may be unclear that this is an error message. This can be solved by putting the "Error:" inside the heading or moving the span below the heading in the markup.

[ppvg]

Side note: moving the span below the heading may complicate the CSS selectors for styling the span.

As an alternative solution, we could look into perhaps leaving the span where it is, and using aria-describedby on the div to point at the span. Since the div has role=group, that might result in AT providing that context when jumping directly to the heading (requires verification).

Additionally: the aria-label on the div should probably be removed.