Calling all developers! We invite you to provide your input on Feature Experimentation by completing this brief survey.
Calling all developers! We invite you to provide your input on Feature Experimentation by completing this brief survey.
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?