-
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
[JSWSERVER-25590] Review Changes In Jira: Missing form label or title attribute for the inputfield
| Labels | Original: 3.3.2 Level-A WCAG21 a11y-triaged ax-at-user ax-bug ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg07 ax-jiradc-vpat-reviewchangesinjira ax-qa batman-frontend-triaged | New: 3.3.2 Level-A WCAG21 a11y-triaged ax-at-user ax-bug ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg07 ax-jiradc-vpat-reviewchangesinjira ax-qa batman-frontend-triaged ril |
| Remote Link | New: This issue links to "Internal ticket (Web Link)" [ 963670 ] |
| 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: 3.3.2 Level-A WCAG21 a11y-triaged ax-at-user ax-bug ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg07 ax-jiradc-vpat-reviewchangesinjira ax-qa batman-frontend-triaged | New: 3.3.2 Level-A WCAG21 a11y-triaged ax-at-user ax-bug ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg07 ax-jiradc-vpat-reviewchangesinjira ax-qa batman-frontend-triaged |
| Component/s | Original: Accessibility [ 62491 ] | |
| Component/s | Original: (Advanced Roadmaps) Other [ 73719 ] | |
| Component/s | New: (Advanced Roadmaps) Accessibility [ 74392 ] |
| Priority | Original: Low [ 4 ] | New: High [ 2 ] |
| Labels | Original: 3.3.2 Level-A WCAG21 a11y-triaged ax-at-user ax-bug ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-pg07 ax-jiradc-vpat-reviewchangesinjira ax-qa batman-frontend-triaged | New: 3.3.2 Level-A WCAG21 a11y-triaged ax-at-user ax-bug ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg07 ax-jiradc-vpat-reviewchangesinjira ax-qa batman-frontend-triaged |
| Description |
Original:
h3. Issue Summary
The label is not specified for "Choose Users.." inputfield which appears after activating "All" button. h3. Steps to Reproduce # Open the "Review Changes In Jira" page. # 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. h3. Screenshot !Screenshot 2024-01-30 at 12.44.31 PM.png|thumbnail! h3. 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. h3. 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.* h3. Workaround Currently there is no known workaround for this behavior. A workaround will be added here when available. h3. 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 |
New:
h3. Issue Summary
The label is not specified for "Choose Users.." inputfield which appears after activating "All" button. h3. 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. h3. Screenshot !Screenshot 2024-01-30 at 12.44.31 PM.png|thumbnail! h3. 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. h3. 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.* h3. Workaround Currently there is no known workaround for this behavior. A workaround will be added here when available. h3. 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 |
| Component/s | New: (Advanced Roadmaps) Other [ 73719 ] |