godaddy-wordpress / godaddy-wordpress/coblocks

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

Open
#2,307 0 comments 0 reactions 1 assignee Claimed by @olafleur-godaddy View on GitHub
[Priority] Low [Type] Bug
Dominant language
JavaScript
Stars
794
Forks
142
PR merge metrics
No merged PRs in 30d

Description

### 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 `` elements linked to the `` 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:
```
Name *

First
```

Notice that 1) the `for` attribute in the `` does not reference the `id` of the `` 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.

```
Name *

First
```

**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 `` and `` together to group and label for screen readers what the radio button group is for.

Existing code (slightly edited)
```
Sugar in your coffee *



Yes

No

```

Using `` and ``
```

Sugar in your coffee *



Yes

No

```

### Screenshots:

![image](https://user-images.githubusercontent.com/2565505/156929076-5b53ea3c-6a78-4fe9-8443-7a21f11d130a.png)
This screenshot shows the Name inputs I've set up.

![image](https://user-images.githubusercontent.com/2565505/156929109-dd5e0311-4454-4f58-ac7f-9ac9165167da.png)
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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.