-
Bug
-
Resolution: Fixed
-
Highest
-
5.16.1
-
Severity 3 - Minor
-
Issue Summary
On “Select Affected Business Service” dialog, the interactive controls are not accessible using keyboard and screen reader.
Steps to Reproduce
- Open the “Help Centre | ITSM” page.
- Navigate to "Search" button near to "Affected Business Service" field and select it.
- A "Select Affected Business Service" modal dialog will appear over the screen.
- Navigate to "Billing service" ,"Email service" controls via TAB key.
- Observe that the interactive controls not accessible using keyboard and screen reader.
Screen recording
Screen Recording 2024-06-18 at 6.57.35 PM.mov
Actual Results
When user mouse clicks on any of the services such as "Billing service" ,"Email service", and so on , the button such as “Selected” will appear to denote the state. The same text ("Selected") is not available with keyboard due to missing keyboard support for "Billing service", "Email service", and so on controls.
As a result if interactive elements are missing keyboard support then screen reader and keyboard only users will miss out on important functionality associated with it.
Expected Results
We recommend that you provide checkbox elements in the table as the first element in each row, so that users can select/unselect according their requirements and also ensure that it should have appropriate accessible name.
Ue appropriate ARIA roles and attributes to code the custom checkbox. Additionally, modify the scripts to ensure it's operable with the keyboard.
A working example of custom checkbox can be found at:
https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html
Workaround
Currently, there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2019)
macOS Ventura Version 13.6.1
Chrome - Version 120.0.6099.234 (Official Build) (x86_64)
Firefox- Version 112.0.1 (64-bit)
Safari- Version 17.3 (18617.2.4.11.9, 18617)
JAWS- Version 2022
NVDA- Version 2020.3
[JSDSERVER-15375] Select Affected Business Service: Buttons are not accessible and not focused on tab key
| Priority | Original: Low [ 4 ] | New: Highest [ 1 ] |
| Resolution | New: Fixed [ 1 ] | |
| Status | Original: Waiting for Release [ 12075 ] | New: Closed [ 6 ] |
| Sprint | New: LTS Sprint [ 7234 ] |
| Labels | Original: 2.1.1 4.1.2 Level-A WCAG22 ax-bug ax-critical-priority ax-customer-escalated ax-esc-ssa ax-qa | New: 2.1.1 4.1.2 Level-A WCAG22 ax-bug ax-critical-priority ax-customer-escalated ax-esc-ssa ax-qa lts10 |
| Remote Link | New: This issue links to "Page (Confluence)" [ 926815 ] |
| Remote Link | New: This issue links to "Page (Confluence)" [ 926102 ] |
| Fix Version/s | New: 10.0.0 [ 107096 ] |
| Status | Original: In Review [ 10051 ] | New: Waiting for Release [ 12075 ] |
| Status | Original: In Progress [ 3 ] | New: In Review [ 10051 ] |
| Description |
Original:
h3. Issue Summary
On “Select Affected Business Service” dialog, the "Selected" buttons are not accessible using keyboard and screen reader. h3. Steps to Reproduce # Open the “Help Centre | ITSM” page. # Navigate to "Search" button near to "Affected Business Service" field and select it. # A "Select Affected Business Service" modal dialog will appear over the screen. # Navigate to "Billing service" ,"Email service" controls via TAB key. # Observe that the "Selected" buttons are not accessible using keyboard and screen reader. h3. Screen recording [^Screen Recording 2024-06-18 at 6.57.35 PM.mov] h3. Actual Results When user mouse clicks on any of the services such as "Billing service" ,"Email service", and so on , the button such as “Selected” is available. The same button ("Selected") is not available with keyboard due to missing keyboard support for "Billing service", "Email service", and so on controls. As a result if interactive elements are missing keyboard support then screen reader and keyboard only users will miss out on important functionality associated with it. h3. Expected Results We recommend that you provide checkbox elements in the table as the first element in each row, so that users can select/unselect according their requirements and also ensure that it should have appropriate accessible name. Alternatively, use appropriate ARIA roles and attributes to code the custom checkbox. Additionally, modify the scripts to ensure it's operable with the keyboard. A working example of custom checkbox can be found at: [https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html] 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, 2019) macOS Ventura Version 13.6.1 Chrome - Version 120.0.6099.234 (Official Build) (x86_64) Firefox- Version 112.0.1 (64-bit) Safari- Version 17.3 (18617.2.4.11.9, 18617) JAWS- Version 2022 NVDA- Version 2020.3 |
New:
h3. Issue Summary
On “Select Affected Business Service” dialog, the interactive controls are not accessible using keyboard and screen reader. h3. Steps to Reproduce # Open the “Help Centre | ITSM” page. # Navigate to "Search" button near to "Affected Business Service" field and select it. # A "Select Affected Business Service" modal dialog will appear over the screen. # Navigate to "Billing service" ,"Email service" controls via TAB key. # Observe that the interactive controls not accessible using keyboard and screen reader. h3. Screen recording [^Screen Recording 2024-06-18 at 6.57.35 PM.mov] h3. Actual Results When user mouse clicks on any of the services such as "Billing service" ,"Email service", and so on , the button such as “Selected” will appear to denote the state. The same text ("Selected") is not available with keyboard due to missing keyboard support for "Billing service", "Email service", and so on controls. As a result if interactive elements are missing keyboard support then screen reader and keyboard only users will miss out on important functionality associated with it. h3. Expected Results We recommend that you provide checkbox elements in the table as the first element in each row, so that users can select/unselect according their requirements and also ensure that it should have appropriate accessible name. Ue appropriate ARIA roles and attributes to code the custom checkbox. Additionally, modify the scripts to ensure it's operable with the keyboard. A working example of custom checkbox can be found at: [https://www.w3.org/WAI/ARIA/apg/example-index/checkbox/checkbox.html] 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, 2019) macOS Ventura Version 13.6.1 Chrome - Version 120.0.6099.234 (Official Build) (x86_64) Firefox- Version 112.0.1 (64-bit) Safari- Version 17.3 (18617.2.4.11.9, 18617) JAWS- Version 2022 NVDA- Version 2020.3 |