Burndown Chart : Input fields are not correctly associated with their visual labels

Issue Summary

On the “Burndown Chart” page, the "Chart", and "Estimate type" dropdowns (that appear on activating the "Chart: Sample Sprint 2", and "Estimate type: Story Points" buttons) are not explicitly associated with their visual labels.

Steps to Reproduce

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

Screenshot

Actual Results

The "Chart", and "Estimate type" dropdowns are not correctly explicitly associated with their visual labels using “for” and “id” attribute. There are <label> elements in the DOM. However, the "for" and "id" values do not match. As a result, users of assistive technologies found it challenging to interact with the form fields.

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">Chart</label>
<select id="d1" ...>
...
</select>

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