Issue Summary

On the "Announcement banner" page, the "Message" textarea is not explicitly associated with its visual label.

Steps to Reproduce

1. Navigate onto the above mentioned page.
2. Navigate onto the mentioned form field and inspect the code.
3. Observe that there is an attempt to associate the visual label and the form field.
4. Observe that the form field is not correctly programmatically associated with its visual label.

Screenshot

Actual Results

The "Message" textarea is not correctly explicitly associated with its visual label using “for” and “id” attribute. There is a <label> element in the DOM with "for" attribute. However, the <textarea> element does not use an "id" attribute. As a result, users of assistive technologies found it challenging to interact with the form field.

Expected Results

The labels and the form fields should be correctly explicitly associated. To implement this, use <label> elements. As well, associate the <label> elements with the form fields using “for” and “id” attributes. Make sure that the values within “for” and “id” match appropriately.

Code Snippet

<label for="d1">Message</label>
<textarea id="d1" ...>
...
</textarea>

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16-inch, 2021)
macOS Monterey Version 12.4
Chrome - Version 103.0.5060.134 (Official Build) (arm64)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.5 (17613.2.7.1.8)
JAWS- Version 2022
NVDA- Version 2020.3
Voiceover - Version Latest