-
Bug
-
Resolution: Fixed
-
Highest
-
4.20.0, 5.3.1
-
Severity 2 - Major
-
Issue Summary
The interactive element "WAITING FOR SUPPORT", "-3w 4d", "I", "WAITING FOR APPROVAL" and so on do not have keyboard support. Additionally, accessible name is missing
Elements name:
1. WAITING FOR SUPPORT
2. -3w 4d
3. "Down arrow" icon
4. WAITING FOR APPROVAL
5. "Question mark icon" i.e. '?' icon
Location of the elements: Tooltip triggering buttons, in the below sections.
1. Details
2. SLAs
3. Past approvals
4. Service project request
Additional details: While hovering on the above-mentioned buttons, display the tooltip contents.
Steps to Reproduce
- Open the JSM homepage.
- Navigate to the "Project" link in the header and activate it.
- Select any project link and activate it.
- Navigate to the main content and activate the present issue link
- Navigate to mentioned instances
- Try to access the tooltip elements present on the page with the keyboard. Observe it is missing keyboard support.
Actual Results
The interactive elements (tooltips) present in "Details", "SLAs", "Past approvals" and so on sections are used to convey crucial information. These interactive elements are coded inappropriately in <div> and <svg> element which makes tooltip functionality inaccessible for keyboard-only and screen reader users as the elements do not receive keyboard focus on traversal thereby missing the crucial information. Moreover, the information is only present on mouse hover. Additionally, label or accessible name is missing for the mentioned instances.
Expected Results
The mentioned tooltip should be accessible for keyboard-only and screen reader users.
Make the tooltip accessible by performing the following steps:
- Replace the tooltip element with the native <button> element in the source code so that it receives keyboard focus on traversal.
- Provide descriptive and unique label or accessible name for the mentioned insances.
- Place the tooltip content in an <div> element and provide a unique "ID" attribute to it. Additionally, add role="tooltip" to the <div> element.
- Control the visibility of this <div> element using CSS depending on whether the button is in the focussed state or not. Ensure that this <div> element does not get dismissed when hovered with the mouse. However, the tooltip content can be dismissed on activating the "Esc" key or when it loses focus.
- Lastly, provide "aria-labelledby" attribute to the <button> and pass the ID of the <div> element as its value. This will read out the content of the tooltip to the screen readers when the button is focused.
Follow this link for a working example of accessible tooltips → https://pauljadam.com/demos/tooltip.html
Screenshot
Workaround
Not Available
Bug Ref: 745896
Bulldog Ref:
- duplicates
-
-
- Closed
-
-
-
- Closed
-
[JSDSERVER-11481] Add comment to issue : Button is missing both a role and a name.
| Priority | Original: Low [ 4 ] | New: Highest [ 1 ] |
| Remote Link | New: This issue links to "Page (Confluence)" [ 912195 ] |
| Labels | Original: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-customer-escalated ax-esc-wf ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 | New: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-customer-escalated ax-esc-wf ax-high-priority ax-jsm ax-jsm-dc-addcomment ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 |
| Labels | Original: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 | New: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-customer-escalated ax-esc-wf ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 |
| Labels | Original: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 | New: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-critical ax-critical-priority ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 |
| Labels | Original: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 | New: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 |
| Remote Link | New: This issue links to "Page (Confluence)" [ 755592 ] |
| Resolution | New: Fixed [ 1 ] | |
| Status | Original: Waiting for Release [ 12075 ] | New: Closed [ 6 ] |
| Labels | Original: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa-verified ax-vpat-critical sprint3 | New: 2.1.1 Accessibility Level-A WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-bug ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa-prioritised ax-qa-verified ax-vpat-critical sprint3 |
| Sprint | Original: JSM Sprint 1, JSM Sprint 2, JSM Sprint 3, JSM Sprint 4 [ 6985, 7016, 7035, 7042 ] | New: JSM Sprint 1, JSM Sprint 2, JSM Sprint 3, JSM Sprint 4, JSM Sprint 5 [ 6985, 7016, 7035, 7042, 7051 ] |