Tab key does not navigate to checkbox or radio buttons

Jim

Vote:

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?

#250800

Mar 18, 2021 1:30

Praful Jangid

Vote:

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.

#250922

Mar 18, 2021 15:01

Jim

Vote:

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>.

#251680

Mar 26, 2021 19:03