search

barrelstrength / sprout

Sprout Marketing Suite modules for Craft CMS applications
https://sprout.barrelstrengthdesign.com
Other
2 stars 9 forks source link

Accessible form field template uses <legend> nested in a <div> that is invalid to HTML5 specification #116

Open jamesmacwhite opened 3 years ago

jamesmacwhite commented 3 years ago

Description (screenshots, logs, ...)

According to the HTML5 spec, a <legend> cannot be wrapped with a <div>.

https://github.com/barrelstrength/craft-sprout-forms/blob/v3/src/templates/_components/formtemplates/accessible/field.twig https://github.com/barrelstrength/craft-sprout-forms/blob/v3/src/templates/_components/formtemplates/accessible/field.twig#L31-L49

image

The legend tag needs to immediately follow the fieldset as the first child element. The heading class could be applied to the label instead.

https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element

BenParizek commented 3 years ago

@jamesmacwhite Thanks for calling this out. I'll look into improving on this in a future release.

In the meantime, if you'd like to update this in your current setup, you can override that specific field template with the underlying HTML that you'd like to use: https://sprout.barrelstrengthdesign.com/docs/forms/template-overrides.html#customizing-templates

jamesmacwhite commented 3 years ago

@BenParizek Thanks Ben. That's what I've done, but thought I'd flag it upstream.