We Keep Coding

Accessible radio input, triggers onChange event by Space or Enter key

I have been reading the MDN <input type="radio"> element documentation. I want to make accessible radio buttons. So, I want a user to be able to tab through each radio button, and when they press space or enter to trigger the onChange event and make the radio button selected.
Here is my code:
<fieldset role="radiogroup">
<legend>Type of radiation:</legend>
<div>
<label htmlFor="radio1" tabIndex=0}>
<input type="radio" name="rad" value="1" id="radio1"
onChange={() => console.log('test')} />alpha
</label>
</div>
<div>
<label htmlFor="radio2" tabIndex={0}>
<input type="radio" name="rad" value="2" id="radio2"
onChange={() => console.log('test')} />beta
</label>
</div>
<div>
<label htmlFor="radio3" tabIndex={0}>
<input type="radio" name="rad" value="3" id="radio3"
onChange={() => console.log('test')} />gamma
</label>
</div>
</fieldset>
But it's not working. I can focus the element, but when I press Enter or Space nothing happens.

You should not do this. If you’re already using native input elements, you are fine!
The misunderstanding here is about how to select radio buttons by means of keyboard: It’s the arrow keys.
Users can jump from one group of radio buttons (with the same name) to the next by means of Tab. Selecting a radio button from the group is done by means of arrow keys.
Of course, you cannot unselect a radio button. But if the first one receives focus and none is checked yet, you can check it with Space and Enter.
See Keyboard Interaction for radiogroup on MDN
You already wrapped the group inside a <fieldset> with <legend>, which is great! You have labels associated with the radio buttons. Looks like you’re all set!
Go ahead, try it:
<fieldset role="radiogroup">
<legend>Type of radiation:</legend>
<div><label for="radio1"><input type="radio" name="rad" value="1" id="radio1" />alpha</label></div>
<div><label for="radio2"><input type="radio" name="rad" value="2" id="radio2" />beta</label></div>
<div><label for="radio3"><input type="radio" name="rad" value="3" id="radio3" />gamma</label></div>
</fieldset>

I dont have enough rep to just add a comment, but have you tried changing tabIndex={0} to tabIndex="0"?
found this here: https://webdesign.tutsplus.com/articles/keyboard-accessibility-tips-using-html-and-css--cms-31966
If you need to use a non-focusable HTML tag for an interactive element for some reason, you can make it focusable with the tabindex="0" attribute. For instance, here’s a turned into a focusable button:
<div role="button" tabindex="0">
Click me
</div>
The role="button" attribute in the above snippet is an ARIA landmark role. Although keyboard-only users don’t need it, it’s indispensable for screen reader users and visual accessibility.

HTML form which gives feedback immediately

I have been asked to produce a 'workbook' in the form of a website. At the end of the workbook the user will be asked set of specific questions where he/she will answer yes/no - this will be in the form of radio buttons.
example: "Did you understand section 1?" ..... YES/NO
When the user has finished answering these questions a lightbox page should appear to tell them to go back to specific points in the website.
I have looked around and can't find any examples so it's quite hard to explain. does anybody know how this can be done? I appreciate any advice

To check if all questions are answered:
HTML:
<div class="question">
<input type="radio" name="q1" value="yes" />
<input type="radio" name="q1" value="no" />
</div>
<div class="question">
<input type="radio" name="q2" value="yes" />
<input type="radio" name="q2" value="no" />
</div>
<div class="question">
<input type="radio" name="q3" value="yes" />
<input type="radio" name="q3" value="no" />
</div>
jQuery:
$(":radio").change(function() {
if (!$('.question:not(:has(:radio:checked))').length) {
alert("all questions are filled in, add code to show colorbox/lightbox/bootstrap modal here")
}
})
See this jsfiddle. I would suggest to use colorbox to create the overlay popup. Another nice one is to use bootstrap modals.
EDIT: updates jsfiddle now working with bootstrap modal!

Preventing radio buttons from being clicked completely

This has been bugging me for a while now. I'm trying to prevent users from clicking on a radio button depending if the user has the access to do so. The first solution was to do the following:
Without disabled
<input type="radio" name="my_radio1" id="abc1" value="5">
<input type="radio" name="my_radio1" id="abc2" value="0">
<input type="radio" name="my_radio1" id="abc3" value="1" checked>
With disabled with pre-selection
<input type="radio" name="my_radio2" id="abc1" onclick="return false;" value="5">
<input type="radio" name="my_radio2" id="abc2" onclick="return false;" value="0">
<input type="radio" name="my_radio2" id="abc3" onclick="return false;" value="1" checked>
With disabled and no pre-selection
<input type="radio" name="my_radio3" id="abc1" onclick="return false;" value="5">
<input type="radio" name="my_radio3" id="abc2" onclick="return false;" value="0">
<input type="radio" name="my_radio3" id="abc3" onclick="return false;" value="1">
As shown here: http://jsfiddle.net/93CqR/6/
This works great for radio buttons ALREADY checked but doesn't work for boxes that haven't been checked (as shown in example 3 above). Are there any known workarounds to this?
Chrome and IE behave differently with this

You should add a 'disabled' attribute to the ones not selectable. You don't really need the javascript.
see http://jsfiddle.net/Ma6TA/
<input type="radio" name="my_radio2" id="abc1" value="5" disabled>
<input type="radio" name="my_radio2" id="abc2" value="0" disabled>
<input type="radio" name="my_radio2" id="abc3" value="1" checked disabled>
Update I don't know the actual use case here, but if you aren't already, the actual check for this should be done on the server. Disabling or hiding the input from the user with javascript will enhance the UX, but a nefarious user could get around these things.

I would use javascript to show/hide the elements that users have access to. For 2 reasons.
1) It's a better user experience if they can only see the form elements they can manipulate.
and more importantly
2) a disabled form field WILL NOT show up in the post/get array. I've had issues with this in the past and it is a very frustrating problem if you don't know why you're fields aren't coming through.
it could be as simple as wrapping js code in a php conditional ie...
<?php if($userCantSeeThese): ?>
<script>
$('.classOfElementsUserShouldntSee').hide();
</script>
<?php endif; ?>

Bootstrap 3: wizard with form validation

I want to create a wizard with a form validation with bootstrap. I use the Twitter Bootstrap Wizard Plugin from http://vadimg.com/twitter-bootstrap-wizard-example/. It uses jQuery Validate Plugin.
My problem is now that the validation of radio buttons does not work. I can skip through the "tabs" even if no radio button is checked.
Has anyone an idea what I've made wrong?
This is my Javascript-Code:
<script>
$(document).ready(function() {
var $validator = $("#commentForm").validate();
$('#rootwizard').bootstrapWizard({
'tabClass': 'nav nav-pills',
'onNext': function(tab, navigation, index) {
var $valid = $("#commentForm").valid();
if(!$valid) {
$validator.focusInvalid();
return false;
}
}
});
window.prettyPrint && prettyPrint()
});
</script>
My input elements look like this here:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input class="required" id="question21" name="question2" required="" type="radio"> 1</label>
<label class="btn btn-primary">
<input id="question22" name="question2" type="radio"> 2</label>
<label class="btn btn-primary">
<input id="question23" name="question2" type="radio"> 3</label>
<label class="btn btn-primary">
<input id="question24" name="question2" type="radio"> 4</label>
<label class="btn btn-primary">
<input id="question25" name="question2" type="radio"> 5</label></div>
Here the entire code of the site:
http://chopapp.com/#aj3u0kz1
Thanks in advance!

You've declared the required rule twice in your HTML markup...
<input class="required" id="question21" name="question2" required="" type="radio">
1) By class: class="required" is declaring the name="question2" radio button set as required.
2) By HTML5 attribute: required="" is declaring the name="question2" radio button set as not required.
Apparently the jQuery Validation plugin gives precedence to the HTML5 attribute.
You only need to use one method of declaring the rule. Use class or HTML5 attribute, not both. If you decide to keep the HTML5 attribute, then use required="required".
EDIT:
Quote OP's Comment:
"... But either class="required" or required="required" works :-( Do you have another idea?"
Did you mean to say "neither" of those works? Both of those work perfectly fine, as well as another method...
Rule declared by class="required": http://jsfiddle.net/MHWmx/
Rule declared by required="required": http://jsfiddle.net/MHWmx/1/
Rule declared within .validate(): http://jsfiddle.net/MHWmx/2/
Otherwise, there's a problem in code you have not shown.

jQuery autoselect radiobox is not working

I cannot get my jquery code to auto select a radiobox.
Here is my html:
<div class="formField rsform-block rsform-block-existingcustomer" style="margin-bottom: -22px;">
<!--<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" /><label for="existingCustomer0">Yes</label><input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" /><label for="existingCustomer1">No</label><br/>
<span id="component100" class="formNoError">Please tell us if you're an existing customer.</span>-->
Are you an existing client?<br>
<label for="existingCustomer0" class="radio"><span class="icon"></span><span class="icon-to-fade"></span>Yes
<input name="form[existingCustomer]" type="radio" value="Yes" id="existingCustomer0" class="addRadio">
</label>
<label for="existingCustomer1" class="radio checked"><span class="icon"></span><span class="icon-to-fade"></span>No
<input checked="checked" name="form[existingCustomer]" type="radio" value="No" id="existingCustomer1" class="addRadio" style="display:none;">
</label>
</div>
and here is a snippet of the jQuery code that is supposed to do it:
if(aaid) {
var num_one = aaid;
jQuery('input[value="Yes"]').prop('checked', true);
Does anyone see the problem? I am trying to autoselect the "yes" checkbox, so that it will activate the next part which is create a dropdown menu.
Thanks in advance! :)

Try this:
$(document).ready(function () {
$('input:radio[name="form[existingCustomer]"][value="Yes"]').attr('checked',true);
//OR
$('input:radio[name="form[existingCustomer]"][value="Yes"]').prop('checked',true);
});
Example

I see a couple issues with your code here.
1. input hmtl does not have proper ending/end tag
2. not sure why you wrap it around the label
3. Be sure to put your jquery code in document ready so that it checks the radiobox when the page is loaded.
4. in you html code, you are pre-setting the No radio to be checked. Is that on purpose? It looks like you set it to no and then using jquery to set it back to yes.
Anyway, try attr instead of prop. Something like this.
$('input:radio[value="Yes"]').attr('checked', true);