HTML validation error: Element "h1" not allowed as child of element "legend"

[borislavpetrovhmcts]

govuk-frontend/src/components/fieldset/template.njk

Line 8 in e41a9b3

<h1 class="govuk-fieldset__heading">

Permitted content for 'legend' element is Phrasing content. Here we have 'h1' inside 'legend',
'h1' is Flow content, which is not permitted inside 'legend'. Html validation throws and error.

[stevenaproctor]

@borislavpetrovhmcts This was updated in HTML5.2 so legends could include headings. See https://www.w3.org/TR/html52/sec-forms.html#the-legend-element

[36degrees]

Hi Boris,

Steven's correct – the content model for legends was updated to allow Phrasing content and headings (h1-h6 elements) in HTML 5.2 – please see #681 for more context.

[NickColley]

@borislavpetrovhmcts thanks a lot for raising, let us know if you run into anything else. 😄

[borislavpetrovhmcts]

I ran into this while using https://yarnpkg.com/en/package/w3cjs module, it still throws the error, probably not updated yet. Thanks for the quick response

[NickColley]

@borislavpetrovhmcts I've raised an issue on their repository on your behalf, thomasdavis/w3cjs#38

[borislavpetrovhmcts]

@NickColley , the issue is not there, the w3cjs uses the standard validator url - https://validator.w3.org
which if I run the template code still trows the error:
Element h1 not allowed as child of element legend in this context.
I guess that the https://validator.w3.org is not testing with the latest html 5 spec

[borislavpetrovhmcts]

The whole thing is very strange...
The test started failing on 5th of Nov ,after the commit in the validator :
validator/validator@18.11.5...master#diff-f6510381ab30f5043197f2d12d8108ccL281

Also if we check earlier releases we can see the addition of the rule :
Allow h1-h6 & hgroup in legend in release 17.0.1 08 January 2017
https://github.com/validator/validator/blob/master/CHANGELOG.md

So first it was implemented then removed ?!?

[borislavpetrovhmcts]

I will raise it and ask the question on the validator repo

[borislavpetrovhmcts]

@NickColley - what should we do now ? Ignore the validation for the radio buttons ?
thomasdavis/w3cjs#38 (comment)

[36degrees]

Hi Boris,

Thanks for following up. Unfortunately I think we're caught in the politics of WC3 vs WHATWG here.

We spent a lot of time exploring different markup options for legends or labels that are also acting as headings, testing in every browser and assistive technology we support. Of all the options we tried, this markup performed the best and we're not aware of any issues with it.

I'd suggest for those reasons in this case ignoring the validator is the right thing to do. Of course, if you do come across any real-world issues in your own testing or have any other concerns, please do let us know.

Thanks,

Ollie