💡 Form Widget - fieldset/legend for checkboxes and radios [accessibility]

[alddesign]

Describe the Problem

I think it would improve accessibility if form inputs like checkboxes and radios would be rendered in a fieldset, with a legend that describes the selection the user is performing.

Right now the html for a group of checkboxes looks like this (simplified):

<div class="elementor-field-type-checkbox">
  <label for="orphaned">Select your option</label>

  <input type="checkbox" value="1" id="option1" name="option">
  <label for="option1">Option 1</label>

  <input type="checkbox" value="2" id="option2" name="option">
  <label for="option2">Option 2</label>
</div>

The issues here is that the first label is orphaned and can not be associated with the checkboxes by assistive technologies. The labels for the individual checkboxes are fine tho.

Propose a Solution

The solution would be to wrap the checkboxes in a fieldset, and replace the first label with a legend. Like this (again, simplified):

<fieldset class="elementor-field-type-checkbox">
  <legend>Select your option</legend>
  
  <input type="checkbox" value="1" id="option1" name="option">
  <label for="option1">Option 1</label>
  
  <input type="checkbox" value="2" id="option2" name="option">
  <label for="option2">Option 2</label>
</fieldset>

Additional Context

To avoid compatibility issues (as the output html will change), a simple toggle switch on wiget or field level would do it. Something like "aggregate in fieldset".

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.