Issue Summary

On “Branches” page, the label for “Type” form field in the modal dialog (that becomes available on activating “Create branch” button) is not announce for screen reader users. The 'for' and 'id' association between the label and the form control is done incorrectly .

Steps to Reproduce

1. Open the “Branches” page.
2. Navigate to the main content.
3. Navigate to the “Create branch” button and activate it.
4. A modal dialog appears on the page.
5. Navigate to the “Type” form field.
6. Inspect the code for the mentioned form field.

Screenshot

Actual Results

When the users navigate to the “Type” form field, no label announce for it. The explicit association of the “for” and “id” attribute is done incorrectly for the mentioned form field.

In case of incorrect explicit association, the element will not be compatible with screen reader. Thus it will be difficult for screen reader users to interact with it effectively.

Expected Results

The label for mentioned form field should get announced by screen reader when the users navigate through it.

The value of “for” and “id” attribute should be same.

Code Snippet

<label for="select-branch-type" class="css-a67pis e8xapdy1">Type</label>
<input id=for="select-branch-type" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-5-input" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">

Workaround

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