-
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, label is not defined for the issue details(which becomes available on activating filter button in the main content area) input field.
Note: Similar issue has been observed for the choose fields (which becomes available on activating field button in the main content area of the page). Refer to Screenshot -4
Steps to Reproduce
- Open the "Accessibility Assessment - Roadmap" page
- Navigate using the tab key to the button "Filter" and activate it.
- Verify a menu appears on activating the button.
- Navigate to the "issue details" input field and inspect it.
- Verify that label is not defined for the input field.
Screenshot 1
Screenshot 2
Screenshot 3
Screenshot 4
Actual Results
The "Issue details", "Choose Releases", "Choose teams", "Choose assignees" and so on form fields in the main content area do not have label associated with them and the "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
The screen reader should announce the label for the form fields correctly.
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 an 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" attributes to convey the purpose of the form fields to screen reader users as well as maintain the presentation.
code snippet
<label for="uid3">issue details</label> <input id="react-select-issue-restriction-role-selection-input" tabindex="0" inputmode="none" id="uid3" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-readonly="true" aria-describedby="react-select-issue-restriction-role-selection-placeholder" 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-25717] Accessibility Assessment - Roadmaps: Missing form label or "title" attribute
| Labels | Original: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa ax-user | New: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa ax-user ril |
| Remote Link | New: This issue links to "Internal ticket (Web Link)" [ 963890 ] |
| 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-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa ax-user | New: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa ax-user |
| 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, label is not defined for the issue details(which becomes available on activate filter button in the main content area) input field. *Note:* Similar issue has been observed for the choose fields (which becomes available on activating field button in the main content area of the page). Refer to Screenshot -4 h3. Steps to Reproduce # Open the "Accessibility Assessment - Roadmap" page # Navigate using the tab key to the button "Filter" and activate it. # Verify a menu appears on activating the button. # Navigate to the "issue details" input field and inspect it. # Verify that label is not defined for the input field. h3. Screenshot 1 !Screenshot 2024-02-01 at 5.29.10 PM.png|width=483,height=268! h3. Screenshot 2 h3. !Screenshot 2024-02-01 at 5.30.07 PM.png|width=477,height=265! h3. Screenshot 3 !Screenshot 2024-02-01 at 5.32.30 PM.png|width=476,height=265! h3. Screenshot 4 !Screenshot 2024-02-01 at 5.39.07 PM.png|width=469,height=260! h3. Actual Results The "Issue details", "Choose Releases", "Choose teams", "Choose assignees" and so on form fields in the main content area do not have label associated with them and the "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. h3. Expected Results The screen reader should announce the label for the form fields correctly. 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 an 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" attributes to convey the purpose of the form fields to screen reader users as well as maintain the presentation. 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, label is not defined for the issue details(which becomes available on activating filter button in the main content area) input field. *Note:* Similar issue has been observed for the choose fields (which becomes available on activating field button in the main content area of the page). Refer to Screenshot -4 h3. Steps to Reproduce # Open the "Accessibility Assessment - Roadmap" page # Navigate using the tab key to the button "Filter" and activate it. # Verify a menu appears on activating the button. # Navigate to the "issue details" input field and inspect it. # Verify that label is not defined for the input field. h3. Screenshot 1 !Screenshot 2024-02-01 at 5.29.10 PM.png|width=483,height=268! h3. Screenshot 2 h3. !Screenshot 2024-02-01 at 5.30.07 PM.png|width=477,height=265! h3. Screenshot 3 !Screenshot 2024-02-01 at 5.32.30 PM.png|width=476,height=265! h3. Screenshot 4 !Screenshot 2024-02-01 at 5.39.07 PM.png|width=469,height=260! h3. Actual Results The "Issue details", "Choose Releases", "Choose teams", "Choose assignees" and so on form fields in the main content area do not have label associated with them and the "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. h3. Expected Results The screen reader should announce the label for the form fields correctly. 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 an 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" attributes to convey the purpose of the form fields to screen reader users as well as maintain the presentation. *code snippet* {code:java} <label for="uid3">issue details</label> <input id="react-select-issue-restriction-role-selection-input" tabindex="0" inputmode="none" id="uid3" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-readonly="true" aria-describedby="react-select-issue-restriction-role-selection-placeholder" 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 |
| Labels | Original: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-AccessibilityAssesmentRoadmaps ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa ax-user | New: 1.3.1 Accessibility Level-A WCAG21 ax-at-user ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa ax-user |
| Description |
Original:
h3. Issue Summary
On the "Accessibility Assessment - Roadmaps" page, label is not defined for the issue details(which becomes available on activate filter button in the main content area) input field. *Note:* Similar issue has been observed for the choose fields (which becomes available on activating field button in the main content area of the page). Refer to Screenshot -4 h3. Steps to Reproduce # Open the "Accessibility Assessment - Roadmap" page # Navigate using the tab key to the button "Filter" and activate it. # Verify a menu appears on activating the button. # Navigate to the "issue details" input field and inspect it. # Verify that label is not defined for the input field. h3. Screenshot 1 !Screenshot 2024-02-01 at 5.29.10 PM.png|width=483,height=268! h3. Screenshot 2 h3. !Screenshot 2024-02-01 at 5.30.07 PM.png|width=477,height=265! h3. Screenshot 3 !Screenshot 2024-02-01 at 5.32.30 PM.png|width=476,height=265! h3. Screenshot 4 !Screenshot 2024-02-01 at 5.39.07 PM.png|width=469,height=260! h3. Actual Results The "Issue details", "Choose Releases", "Choose teams", "Choose assignees" and so on form fields in the main content area do not have label associated with them and the "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. h3. Expected Results The screen reader should announce the label for the form fields correctly. 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 an 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" attributes to convey the purpose of the form fields to screen reader users as well as maintain the presentation. 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, label is not defined for the issue details(which becomes available on activate filter button in the main content area) input field. *Note:* Similar issue has been observed for the choose fields (which becomes available on activating field button in the main content area of the page). Refer to Screenshot -4 h3. Steps to Reproduce # Open the "Accessibility Assessment - Roadmap" page # Navigate using the tab key to the button "Filter" and activate it. # Verify a menu appears on activating the button. # Navigate to the "issue details" input field and inspect it. # Verify that label is not defined for the input field. h3. Screenshot 1 !Screenshot 2024-02-01 at 5.29.10 PM.png|width=483,height=268! h3. Screenshot 2 h3. !Screenshot 2024-02-01 at 5.30.07 PM.png|width=477,height=265! h3. Screenshot 3 !Screenshot 2024-02-01 at 5.32.30 PM.png|width=476,height=265! h3. Screenshot 4 !Screenshot 2024-02-01 at 5.39.07 PM.png|width=469,height=260! h3. Actual Results The "Issue details", "Choose Releases", "Choose teams", "Choose assignees" and so on form fields in the main content area do not have label associated with them and the "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. h3. Expected Results The screen reader should announce the label for the form fields correctly. 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 an 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" attributes to convey the purpose of the form fields to screen reader users as well as maintain the presentation. 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 |