-
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
[JSWSERVER-25559] Accessibility Assessment - Roadmaps: Missing explicit association of form fields
| Labels | Original: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-AccessibilityAssesmentRoadmaps ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa | New: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-AccessibilityAssesmentRoadmaps ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa ril |
| Remote Link | New: This issue links to "Internal ticket (Web Link)" [ 963642 ] |
| Priority | Original: High [ 2 ] | New: Medium [ 3 ] |
| Introduced in Version | Original: 9.12 | New: 8.2 |
| Affects Version/s | New: 8.20.30 [ 106364 ] | |
| Affects Version/s | New: 9.4.17 [ 106909 ] |
| Labels | Original: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-AccessibilityAssesmentRoadmaps ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa | New: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-AccessibilityAssesmentRoadmaps ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa |
| Component/s | Original: Accessibility [ 62491 ] | |
| Component/s | Original: (Advanced Roadmaps) Other [ 73719 ] | |
| Component/s | New: (Advanced Roadmaps) Accessibility [ 74392 ] |
| Status | Original: Needs Triage [ 10030 ] | New: Ready for Development [ 10049 ] |
| Description |
Original:
h3. Issue Summary
On the "Accessibility Assessment - Roadmaps" page, the "start" and "End" form fields lack explicit association. h3. 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. h3. Screenshot !Screenshot 2024-02-05 at 4.13.39 PM.png|width=576,height=291! h3. 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. h3. 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. h3. Workaround Currently, there is no known workaround for this behaviour. A workaround will be added here when available h3. 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 |
New:
h3. Issue Summary
On the "Accessibility Assessment - Roadmaps" page, the "start" and "End" form fields lack explicit association. h3. 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. h3. Screenshot !Screenshot 2024-02-05 at 4.13.39 PM.png|width=576,height=291! h3. 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. h3. 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* {code:java} <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="">{code} h3. Workaround Currently, there is no known workaround for this behaviour. A workaround will be added here when available h3. 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 |
| Priority | Original: Low [ 4 ] | New: High [ 2 ] |
| Labels | Original: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-AccessibilityAssesmentRoadmaps ax-jiradc-vpat-pg03 ax-qa | New: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-AccessibilityAssesmentRoadmaps ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa |