Accessibility problems in Coblocks Forms - Name input and radio button group.

[grahamarmfield]

Describe the bug:

If I'm a screen reader user I should be able to complete a form easily - knowing what all the input fields are for. This information is usually provided by correct use of <label> elements linked to the <input> fields.

When using the First Name/Last Name input group, the link between the label and the input is broken so screen reader users have a much harder job knowing what these fields are for.

Also...

When using the Radio button group in a form, the question that the radio buttons answer is not announced in screen readers.

To reproduce:

1. Add a Form element to a page - including a First Name/Last Name control and a Yes/No radio button group.
2. Save or update page and visit in browser with screen reader running. I use NVDA and Firefox browser.
3. Tab to First Name edit box, and notice that no prompt for input field is announced.
4. Tab to Last Name edit box, and notice that no prompt for input field is announced.
5. Tab to radio buttons, and notice that although the Yes and No labels are read out, there is no announcement of the question.

Expected behavior:

For the name text boxes I'd expect screen reader to announce that the edit is for First Name or Last Name.

The reason it's not happening is that the 'Name' label is not correctly linked to the input field. Also, the 'First' text is not linked to the input.

The (slightly edited) existing code is:

<label for="name" class="coblocks-label">Name <span class="required">*</span></label>
<input type="text" id="name-firstname" name="field-name[value][first-name]" 
   class="coblocks-field coblocks-field--name first" required="">
<small class="coblocks-form__subtext">First</small>

Notice that 1) the for attribute in the <label> does not reference the id of the <input> which it needs to. and 2) there is nothing to link 'First' to the input field.

If you change the code to the following block, screen reader users will get all the information they need.

<label for="name-firstname" class="coblocks-label">Name <span class="required">*</span></label>
<input type="text" id="name-firstname" name="field-name[value][first-name]" 
   class="coblocks-field coblocks-field--name first" required="" aria-describedby="first">
<small class="coblocks-form__subtext" id="first">First</small>

For the radio buttons I'd expect the question to be read out as well as the answers provided by the radio buttons.

The best way of doing that is to use <fieldset> and <legend> together to group and label for screen readers what the radio button group is for.

Existing code (slightly edited)

<label for="sugar-in-your-coffee" class="coblocks-label">Sugar in your coffee <span class="required">*</span></label>
<div class="coblocks--inline">
  <input id="sugar-in-your-coffee-yes" type="radio" name="field-sugar-in-your-coffee[value]" value="Yes" class="radio" required="">
  <label class="coblocks-radio-label" for="sugar-in-your-coffee-yes">Yes</label>
  <input id="sugar-in-your-coffee-no" type="radio" name="field-sugar-in-your-coffee[value]" value="No" class="radio">
  <label class="coblocks-radio-label" for="sugar-in-your-coffee-no">No</label>
</div>

Using <fieldset> and <legend>

<fieldset>
<legend>Sugar in your coffee <span class="required">*</span></legend>
<div class="coblocks--inline">
  <input id="sugar-in-your-coffee-yes" type="radio" name="field-sugar-in-your-coffee[value]" value="Yes" class="radio">
  <label class="coblocks-radio-label" for="sugar-in-your-coffee-yes">Yes</label>
  <input id="sugar-in-your-coffee-no" type="radio" name="field-sugar-in-your-coffee[value]" value="No" class="radio">
  <label class="coblocks-radio-label" for="sugar-in-your-coffee-no">No</label>
</div>
</legend>

Screenshots:

This screenshot shows the Name inputs I've set up.

This screenshot shows the Yes/No radio button group I set up. Without the question, the Yes and No answers have no context.

Isolating the problem:

• [x] This bug happens with no other plugins activated
• [x] This bug happens with a default WordPress theme active
• [x] This bug happens without the Gutenberg plugin active
• [x] I can reproduce this bug consistently using the steps above

WordPress version:

WP 5.9.1

Gutenberg version:

Not running Gutenberg plugin.