-
Bug
-
Resolution: Unresolved
-
Medium (View bug fix roadmap)
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Issue Summary
On the "Accessibility Assessment - Roadmaps" page, the "start" and "End" form fields lack explicit association.
Steps to Reproduce
- Open the "Accessibility Assessment- Roadmaps" page.
- Navigate to the mentioned form fields.
- Inspect the element and verify that the form fields are missing explicit association.
Screenshot
Actual Results
The "Target Start" and "Target End" form fields in the main content area do not have labels explicitly associated with them. The 'for' attribute is missing in the 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 for="uid1" class="css-eshxlf">Target start:</div></label> <input id="uid1"id="react-select-2-input" tabindex="0" inputmode="none" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-readonly="true" class="css-1hac4vs-dummyInput" value="">
Workaround
Currently, there is no known workaround for this behaviour. A workaround will be added here when available
Environment
MacBook Pro (13-inch, 2018)
macOs Ventura 13.3.1
Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest
- links to
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|