Issue Summary

The form control is not correctly associated with its visible label either explicitly or implicitly.
Element Name: Description(optional) label

Location of the element: Description(optional) rich text editor

Issue details: Visible label description(optional) is not associated with the rich text editor.

Note: Screen reader does not announce the form field with the edit field as well.

Steps to Reproduce

1. Navigate to the "Help Center" and activate it.
2.  Navigate to the main content and activate any link from the "Get IT Help", "Set up VPN to the office", etc options.
3. Navigate to the "Description" textarea and observe that visible text is not associated with textarea.

Actual Results

The explicit association of the “for” and “id” attribute is missing for the mentioned input field. In case of missing explicit association, the element will not be compatible with screen reader software. Thus it will be difficult for screen reader users to interact with it effectively.

Expected Results

The label for mentioned checkbox should get announced by the screen reader software when the user navigates through it.

The label for mentioned checkbox should be explicitly associated with the form control by providing an identical value that is unique from other IDs to the "for" and "id" attribute to ensure that assistive technologies identify the label for the form control correctly.

<label class="field-label" for="descr">Description <span class="vp-optional">(optional)</span></label>
<div for="descr" class="ua-chrome ProseMirror" role="textbox" contenteditable="true" data-gramm="false">
(...)
</div>

Alternatively,

Provide descriptive and appropriate label "Description(Optional)" using the "aria-label" attribute.

<div class="ua-chrome ProseMirror" role="textbox" aria-label="Description(Optional)" contenteditable="true" data-gramm="false">
(...)
</div>

Screenshot

Workaround

Not Available

Bug Ref: 749822

Bulldog Ref: