Accessibility Assessment | Teams: Incorrect explicit association for shared team field

Issue Summary

On the Accessibility Assessment | Teams page, the "Shared team" form field is not correctly associated with its visual label in the modal dialog (that becomes available on activating "Add team" button).

Steps to Reproduce

1. Open the "Accessibility Assessment | Teams" page.
2. Navigate to the main content.
3. Navigate to the "Add team" button and activate it.
4. A modal dialog appears on the page.
5. Navigate to the "Add existing shared team" radio button and activate it.
6. Navigate to the mentioned form field.
7. Inspect the code.
8. Observe that the form field is not correctly associated with its visual label.

Screenshot

Actual Results

The "Shared team" form field is not correctly associated with its visual label using “for” and “id” attributes. The <label> and <input> elements although use “for” and “id” attributes respectively in the DOM. However, the values within the “for” and “id” attributes do not match appropriately. 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> element. As well, associate the <label> element with the form field using “for” and “id” attributes. Make sure that the values within “for” and “id” match appropriately.

Code Snippet

<label class="Field__Label-vqybw1-1 ghWQGY" id="sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-label" for="sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b">Shared team</label>
<input autocapitalize="none" autocomplete="off" autocorrect="off" id="sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-labelledby="sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-label sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-helper sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-valid sharedTeamId-cd3a3996-1cd6-4867-930c-82229b34f84b-error" 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

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 2022
NVDA- Version 2020.3
Voiceover - Version Latest