Details
-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
5.11.0
-
Severity 3 - Minor
-
Description
Issue Summary
The custom checkbox such as "DHCP " in edit dilog in more options in all objects is not keyboard operable. The role and state of the checkboxes are not programmatically determined .
Note : same issue reproduced in the services column also.
Steps to Reproduce
- Open the Asset search page.
- Navigate to "More action" and activate it
- Navigate to "Edit" button and activate it.
- Observe the modal dialog appears on the page.
- Navigate to mentioned checkbox
- Try to access the checkboxes.
- Observe that the checkboxes are not keyboard operable.
- Listen that the checkboxes are not identified with role or state.
Screenshot
Actual Result
The custom checkbox such as "DHCP " in edit dialog in more options in all objects is not keyboard operable. The role and state of the checkboxes are not programmatically determined for screen reader users.
This resulted in keyboard-only and screen reader users not being able to interact with the custom checkboxes.
Expected Results
The custom checkboxes must be identified with role and state using screen reader for its users. Also, the custom checkboxes must be operable with a keyboard for its users.
Â
Replace the custom checkbox with the standard checkbox by using the <input type="checkbox"> element.
Â
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Â
Code snippet
<label for="a1" class="ruiCheckbox">DHCP<input id="a1" class="ruiCheckbox__input" type="checkbox"><span class="ruiCheckbox__mark"></span></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  13.5
Chrome - Version 115.0.5790.170 (Official Build) (arm64)
Firefox- Version 112.0. 1
Safari- Version 16.5 (18615.2.9.11.4)
JAWS- Version 2023
NVDA- Version 2023
Voiceover - Version Latest