Join us this Friday for AI in Action at the Virtual Happy Hour! This free virtual event is open to all—enroll now on Academy and don’t miss out.
Join us this Friday for AI in Action at the Virtual Happy Hour! This free virtual event is open to all—enroll now on Academy and don’t miss out.
Hi Jim, this is probably happening due to the custom css if we use, and hide out the default checkbox/radio buttons using the visibility hidden or display none. There is nothing to do with Epi for this issue (as I guess :) ). You might need some workaround in order to fix that. Hope this will help.
Thanks Praful,
Just to follow up, this is the solution we came up with. I added this to the bottom of your form.js
:
// create the visible checkbox using a <span>
$('.FormChoice input:not([type=hidden])').after('<span class="choice_element" tabindex="0"></span>');
// hitting the space bar with focus on a checkbox clicks the checkbox
$('.FormChoice span.choice_element').on('keydown', function (e) {
if (e.which == 0x20) { // space bar
$(this).trigger('click');
e.preventDefault(); // prevent browser from scrolling down a screen
}
});
The <input type="checkbox">
element wasn't picking up the tab key focus because it is hidden. I added tabindex="0"
to the <span>
that stands in for the checkbox. That got the tab to focus on the box.
Once the <span>
has the focus, I listen for a keydown event to see if the user hit the space bar. If that's the case, trigger a click on the <span>
.
When tabbing through a form created with Episerver Forms, the tab key will navigate to all text, number, url, selection, and even range slider and file upload type elements-- but will skip over groups of checkboxes or radio buttons. Anybody else experience this?