search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.18k stars 325 forks source link

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

Closed borislavpetrovhmcts closed 5 years ago

borislavpetrovhmcts commented 5 years ago

https://github.com/alphagov/govuk-frontend/blob/e41a9b39ccc8fff13fe64a09f868ce64a7e4d502/src/components/fieldset/template.njk#L8

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 commented 5 years ago

@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 commented 5 years ago

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 https://github.com/alphagov/govuk-frontend/pull/681 for more context.

NickColley commented 5 years ago

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

borislavpetrovhmcts commented 5 years ago

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 commented 5 years ago

@borislavpetrovhmcts I've raised an issue on their repository on your behalf, https://github.com/thomasdavis/w3cjs/issues/38

borislavpetrovhmcts commented 5 years ago

@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 commented 5 years ago

The whole thing is very strange... The test started failing on 5th of Nov ,after the commit in the validator : https://github.com/validator/validator/compare/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 commented 5 years ago

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

borislavpetrovhmcts commented 5 years ago

@nickcolley - what should we do now ? Ignore the validation for the radio buttons ? https://github.com/thomasdavis/w3cjs/issues/38#issuecomment-441837550

36degrees commented 5 years ago

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