Issue Summary

The explicit association is missing for “From branches” and “Branch name” form controls in the modal dialog (that becomes available on activating “Create branch” button) in the main content area.

Steps to Reproduce

1. Open the “Branch” 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 mentioned form controls.
6. Inspect the code.

Screenshot

Actual Results

The “From branch” and “Branch name” form controls do not have label explicitly associated to these. The 'for' and 'id' association is missing between the label and the form controls.

As a result, screen reader might get confuse about the form controls.

Expected Results

Associate the label explicitly with the form control by providing identical value which is unique from other IDs to "for" and "id" attribute to ensure that assistive technologies identify the label for the form control correctly.

Code Snippet

<label for="123" class="css-a67pis e8xapdy1">From branch</label>
<input id="123" 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;">

Environment

MacBook Pro (16-inch, 2021)
macOs Monterey Version 12.3.1
Chrome - Version 101.0.4606.81 (Official Build) (64-bit)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2021
NVDA- Version 2020.3
Voiceover - Version Latest

Workaround

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