-
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 "Refine issues displayed" page, the "Choose issue type" and "Choose issue status" input fields do not have programmatically defined accessible name.
Steps to Reproduce
- Navigate to the above mentioned page.
- Navigate onto the "Exclude issue types", or "Exclude statuses", button and activate it.
- Navigate onto the mentioned instances and inspect their code.
- Observe that the input fields do not have an accessible name.
Screenshot 1
Screenshot 2
Actual Results
The "Choose issue type", and "Choose issue status" input fields do not have programmatically defined accessible name.
As a result, users of assistive technologies will not be able to understand the purpose or the functionality associated with the form fields.
Expected Results
Interactive elements must have programmatically defined accessible names so that their functionality is communicated to assistive technology users. In this scenario, use <label> element to provide an accessible name to the input fields. Make sure that the <label> element is associated with the form fields using "for" and "id" attributes.
When there is no visible text and you cannot add text to the page, use aria-label to manually name elements.
Make sure that the accessible name signposts the purpose or the functionality of the input fields.
Code Snippet
<label for="a1">Choose issue type</label> <input id="a1" type="text" role="combobox" ...>
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 13.3.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2023
NVDA- Version 2023.3
Voiceover - Version Latest
- links to
