Using <fieldset> within <fildset>

[sylviefaulkner]

I have research the web if <fieldset> within <fildset> and <heading> within <legend> could be used in html5
I found information on the California Community Colleges Accessibility Center website that this was acceptable in html5.
I tested a demo that I created using NVDA and it works like I expect it to work but my form looks terrible.
My guess is that the styling for fieldset fieldset don't exist in the theme.min.css so I was wondering if there is a plan to add this feature in the WET templates. The reason I'm asking is because the form that we are working with is complex and has multiple section where each section are identical. Visually, it is easy to see the heading above each section but when we generate the error message, many error are the same text so when you click on the error message to take you to the location, the heading is not read if it is not grouped. Then I thought using the aria-describedby to address this problem but then the screen reader repeats the title at every label so not very user friendly.
Here is a simplified sampling of code I created to display the type of coding that I'm looking for:
<section>

<fieldset>

<legend><h2>Animal for companion (optional)</h2></legend>

<fieldset class="chkbxrdio-grp">

<legend><span class="field-name">Rat</span></legend>

<div class="checkbox">

<label for="Rat1">

<input type="checkbox" name="Rat" value="Rat1" id="Rat1" />White</label>

</div>

</fieldset>

<fieldset class="chkbxrdio-grp">

<legend><span class="field-name">Gerbil</span></legend>

<div class="checkbox">

<label for="Gerbil2">

<input type="checkbox" name="Gerbil" value="Gerbil2" id="Gerbil2" />Brown</label>

</div>

</fieldset>

<fieldset class="chkbxrdio-grp">

<legend><span class="field-name">Guinea pig</span></legend>

<div class="checkbox">

<label for="Guinea1">

<input type="checkbox" name="Guinea" value="Guinea1" id="Guinea1" />Long hair</label>

</div>

<div class="checkbox">

<label for="Guinea2">

<input type="checkbox" name="Guinea" value="Guinea2" id="Guinea2" />Short hair</label>

</div>

</fieldset>

<fieldset class="chkbxrdio-grp">

<legend><span class="field-name">Cat</span></legend>

<div class="checkbox">

<label for="Cat1">

<input type="checkbox" name="Cat" value="Cat1" id="Cat1" />Long hair</label>

</div>

<div class="checkbox">

<label for="Cat2">

<input type="checkbox" name="Cat" value="Cat2" id="Cat2" />Short hair</label>

</div>

</fieldset>

<fieldset class="chkbxrdio-grp">

<legend><span class="field-name">Dog</span> </legend>

<div class="checkbox">

<label for="Dog1">

<input type="checkbox" name="Dog" value="Dog1" id="Dog1" />Long hair</label>

</div>

<div class="checkbox">

<label for="Dog2">

<input type="checkbox" name="Dog" value="Dog2" id="Dog2" />Short hair</label>

</div>

<div class="checkbox">

<label for="Dog3">

<input type="checkbox" name="Dog" value="Dog3" id="Dog3" />Non-shedding</label>

</div>

</fieldset>

</fieldset>

</section>

Thank you

[ghost]

This be more suited as an issue, but your issue is related to Bootstrap 3 (https://getbootstrap.com/docs/3.4/).

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

I believe the min-width: 0; set by bootstrap is causing the issues, maybe overriding this we'll fix this.