Tab key does not navigate to checkbox or radio buttons

Jim
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
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
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.