-
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
The label is not specified for "Choose Users.." inputfield which appears after activating "All" button.
Steps to Reproduce
- Navigate to the "Plans" in header section and activate any plan.
- Observe the "Plan" page appears.
- Navigate to the "Review Changes" button and activate it.
- Observe the "Review Changes" modal appears.
- Navigate to the "All" button and activate it.
- Observe the dialog appears.
- Navigate to the mentioned inputfield and inspect the code.
- Observe that, label is not provided for the inputfield.
Screenshot
Actual Results
The "Choose Users.." inputfield do not have the label associated with them and aria-label is not included in the source code either.
As a result, screen reader users will not understand the purpose of the form field.
Expected Results
Apply the following changes:
- Provide unique and descriptive label for mentioned form field using <label> element.
- Associate the label explicitly with the form field by providing identical value which is unique from other IDs to "for" and "id" attributes of the label and form field respectively.
Alternatively, use either hidden labels or "title" or "aria-label" attribute to convey the purpose of the form fields to screen reader users as well as maintain the presentation.
Note: Please take the suggestion from your design team before providing the visual label.
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 Ventura 14.3
Chrome -Version 120.0.6099.71 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit)
Safari- Version 17.1 (19616.2.9.11.7)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest
- links to
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|