Issue Summary

Within the "Warning centre" non-modal, the toggle buttons are not explicitly associated with the given label.

Steps to Reproduce

1. Open the "Accessibility Assessment - Roadmaps" page.
2. Navigate to the "warning" button in the header section and activate it.
3. Navigate to the toggle buttons and inspect it.

Screenshot

Actual Results

The "Filter issues with warning", "Target dates set beyond the due date" and so on toggle buttons in the main content area do not have labels explicitly associated to them. The 'for' attribute is missing in labels of the form fields.
As a result, screen reader users might not understand the purpose of the form fields.

Expected Results

The screen reader should announce the label for the form fields correctly. Use ‘for’ and ‘id’ attributes to associate labels with their respective form fields. Ensure that the value of ‘for’ attribute of the label exactly matches the value of ‘id’ attribute of the form field.

code snippet

<label id="viewField-uid6-label"  for="viewField-uid6" class="css-1nzatiy">Filter issues with warning</label>
<input aria-labelledby="viewField-uid6-label" class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-10-input" spellcheck="false" tabindex="0" type="text">

Workaround

Currently, there is no known workaround for this behaviour. 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