Ability to group radio buttons / checkboxes within sub-headings

Hi.

I’m wondering how best to support radio buttons (and checkboxes) which have sub-groups with headings?

Currently, you can use multiple govukRadios macros which share the same name attribute, however because they use a data-module attribute to scope the conditional reveals, these don’t work properly across the groups.

Alternatively, you can using a single macro and put headings in using dividers, but these don’t currently support HTML markup.

On a related not, it’s unclear whether the best output would be nested <fieldset>s with <legend>s, or a single <fieldset> with headings and either aria attributes or visually-hidden prefixes to associate labels with their headings.

[colinrotherham]

I’ve been working on this too so thought I’d share my examples:

1. Multiple fieldsets of checkboxes with legends https://seemly-airmail.glitch.me

2. Multiple fieldsets of checkboxes with legends With aria-describedby on nested fieldsets https://childlike-cinema.glitch.me/

3. Single fieldset of checkboxes with subheadings https://steep-knife.glitch.me

We’re doing some more screen reader testing on Monday.

So far we’ve not tried @frankieroberto’s suggestion above of prefixing (but visually hidden) the nested legends with the parent legend’s text.

[NickColley]

I spoke to Frankie and we put together a coded example: https://tricky-fisher.glitch.me/