radiobutton/checkboxed in nested fieldsets inadvertently setting conditional to hidden

[nunommc]

Bug Report

What is the issue?

In the example shown in the screenshot below, there are radio buttons shown only when the user chooses the first option("I am employed or self employed").
When I click in any of the radio buttons below the conditional content will then get closed and the option I just clicked on disappears.

So, on click, it's running addClass(input, 'nhsuk-radios__conditional--hidden') to all conditionalInputs in the page.

One of two things I think should happen:

• either the addEventListener is added only to radiobuttons/checkboxes that could affect the aria-expanded;
• find the .nhsuk-radios--conditional or nhsuk-checkboxes--conditional which is an immediate parent of the current node, and apply the toggleConditionalInput only to that;

What steps are required to reproduce the issue?

Is there anything else you think would be useful in recreating the issue?

[chrimesdev]

Hey @nunommc,

Thanks for raising this issue, nested conditionals could work but only to reveal small amounts of information. Is the JavaScript something you think you could attempt a fix at? If so we are always open to new contributors!

Looking at the form design screenshot you have posted, whilst it’s possible to structure pages in this way, we’d recommend splitting the questions across multiple screens before nesting form elements like this - as the pages become more complex, require multiple interactions and work less well without JavaScript. You could have a simple ‘guard question’ - Are you employed? - and then ask for more detail on the next page if they answered yes. We have some guidance on how to write good questions for forms.

There also might be accessibility issues for screen reader users as you can't nest fieldsets and make it clear which legend goes with which fieldset. So this would need testing with users (not just automated checkers).

As the guidance for the conditional reveals in the NHS digital service manual says 'Keep it simple. If you need to add a lot of content, consider showing it on the next page in the process instead.'