Details
-
Bug
-
Resolution: Unresolved
-
High
-
None
-
8.20.30, 9.12.2, 9.4.17
-
8.2
-
Severity 3 - Minor
-
Description
Issue Summary
The label is not defined for the combo box that becomes available on activating "Fields" button.
Steps to Reproduce
- Navigate to the "Plan" dropdown and select any plan.
- Navigate to the mentioned element.
- Verify that label is not defined.
Screenshot
Actual Results
The "Choose Fields" form field in the main content area do not have the label associated with them and "title" attribute is not included in their source code either.
As a result, screen reader users will not understand the purpose of the form fields.
Expected Results
Apply the following changes:
- Provide unique and descriptive label for mentioned form fields 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 "aria-label" attribute to convey the purpose of the form fields to screen reader users as well as maintain the presentation.
Code Snippet
<input aria-label="Choose fields" class="" autocapitalize="none" autocomplete="off" autocorrect="off" id="react-select-495-input" spellcheck="false" tabindex="0" theme="[object Object]" type="text" aria-autocomplete="list" value="" style="background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit; box-sizing: content-box; width: 100%;">
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.6.1
Chrome - Version 120.0.6099.234 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 17.3 (18617.2.4.11.9, 18617)
JAWS- Version 2022
NVDA- Version 2020.3