-
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 | Teams page, the "Associated issue source", "Team type" and "Members" form fields are not correctly associated with their visual labels in the modal dialog (that becomes available on activating "Add team" button).
Steps to Reproduce
- Open the "Accessibility Assessment | Teams" page.
- Navigate to the main content.
- Navigate to the "Add team" button and activate it.
- A modal dialog appears on the page.
- Navigate to the mentioned form fields.
- Inspect the code.
- Observe that the form field is not correctly associated with its visual label.
Screenshot
Actual Results
The "Associated issue source", "Team type" and "Members" form fields are not correctly associated with their visual labels using “for” and “id” attributes. The <label> and <input> elements although use “for” and “id” attributes respectively in the DOM. However, the values within the “for” and “id” attributes do not match appropriately. As a result, users of assistive technologies found it challenging to interact with the form fields.
Expected Results
The labels and the form fields should be correctly explicitly associated. To implement this, use <label> element. As well, associate the <label> element with the form field using “for” and “id” attributes. Make sure that the values within “for” and “id” match appropriately.
Code Snippet
<label class="Field__Label-vqybw1-1 ghWQGY" id="issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-label" for="issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c">Associated issue source</label> <input autocapitalize="none" autocomplete="off" autocorrect="off" id="issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-labelledby="issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-label issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-helper issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-valid issueSource-58342238-d5b1-4d20-8fa4-79f737ee6f5c-error" value="" style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;">
Workaround
Required, if there is no workaround please state:
Currently there is no known workaround for this behavior. 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
- links to
