-
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
