Appropriate use of fieldset/div, legends, accessibility advice

[patrickhlauke]

Use more generic <div> for single form controls, use <fieldset> and
<legend> for radio button groups and checkboxes (where appropriate).
Include accessibility advice from v3
Fixes #17248

[patrickhlauke]

@mdo note that this introduces one problem with the current styling of <legend>.

As semantically, the use of <legend> in this case is correct (unless we want to go down a further route of giving the original <label> elements an id and then tying them explicitly to each radio/checkbox using aria-describedby (which would then require extra explanation of why it's done that way - for styling ease), i'd suggest coming up with a modifier class for <legend> to style it the same as regular <label> in specific situations...thoughts?

[patrickhlauke]

/cc @cvrebert

[XhmikosR]

@patrickhlauke: can you rebase?

[patrickhlauke]

@XhmikosR done, i think (my git-fu isn't as strong as it should be, so force-pushed in the end). still waiting for @mdo's thoughts about the use of <legend> as per the screenshot above...

[XhmikosR]

Looks good git-wise :)

[mdo]

While it's technically right, most folks won't build their forms this way—with the <legend>—but if we're using classes more for common patterns, that shouldn't be too much of an issue.

[patrickhlauke]

@mdo does this mean it's good to be merged, and we'll fix things later with classes? at a stretch, as it's an example of grid, i could probably let those two legends slide (but maybe add a comment to that effect in the HTML). or i could give those two bits of text an id and associate the radios/checkbox with aria-describedby (as an ARIA-based alternative to <fieldset>/<legend>), but I worry this would then need further explanation in prose...

[mdo]

I mean we need to use classes to style these form labels so they don't get all screwed up :).

[cvrebert]

@patrickhlauke Does adding .form-control-label to the <legend>s happen to work?

[patrickhlauke]

As rebasing was starting to get messy, I've made a successor pull request #19277