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

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.

Related

clicking on custom checkbox does not run the associated onClick function

I'm trying to use Ryan Fait's custom checkboxes. These are much more readable than the standard checkboxes, but clicking on them does not run the associated onClick functions. Any advice will be appreciated. The relevant portion of my code follows:
<p style="font-family:arial; font-size:large">
<input type="checkbox" class="styled" id="level-0" type="radio" value="0"
onClick="count();"> 0 (ages 5-7)
<input type="checkbox" class="styled" id="level-1" type="radio" value="1"
onClick="count();" checked> 1 (beginner)
<input type="checkbox" class="styled" id="level-2" type="radio" value="2"
onClick="count();" checked> 2 (easy)
<input type="checkbox" class="styled" id="level-3" type="radio" value="3"
onClick="count();" checked> 3 (intermediate)
<input type="checkbox" class="styled" id="level-4" type="radio" value="4"
onClick="count();"> 4 (challenging)
<input type="checkbox" class="styled" id="level-5" type="radio" value="5"
onClick="count();"> 5 (hard)
<input type="checkbox" class="styled" id="level-all" type="radio" value="6"
onClick="all_levels();"> All
<input id="available" type="button" style="background-color:white; border:2px;
font-family:arial; font-size:large" value="??"> </p> <br>
From Styling Checkboxes and Radio Buttons With CSS and JavaScript on Ryan Fait's site:
How does it work?
In a nutshell, the JavaScript looks for every form element with
class="styled" on it; hides the real form element; sticks a span tag
with a CSS class on it next to the element; and, finally, mouse events
are added to the span that handles the visual stages form inputs go
through when they are clicked.
Your inline onClick handlers are not firing because your checkboxes aren't actually being clicked. Ryan explicitly says that it "hides the real form element; sticks a span tag with a CSS class" ... so you are actually clicking on the <span> that Ryan's code inserted; the real checkbox is hidden.
Later in the article, Ryan says outright:
onChange and other JavaScript events
This script utilizes JavaScript's onChange and other events. Because
these events can only be used once, if you want to add more functions
to an event, you will need to call them from inside my script.
You will need to call them from inside my script
Take your onClick= out of the <input> tags; add your code to his code -- you'll have to figure out which bit of your code to call from his code, since I see you're doing different things from your onClicks.
You should also take your style="..." out of your tags and use a stylesheet, but that's a separate issue.

Javascript/HTML gray out radio list?

Is there a way I can 'gray' out an html radio list input? I know I can actually change the color.. But I want to make it so the radio button list cannot be toggled either. I also want it to 'highlight' or be toggled to a specific radio list while in this state.
So for instance with this radio list:
<input type="radio" name="group2" value="Water"> Water<br />
<input type="radio" name="group2" value="Lemonade"> Lemonade<br />
<input type="radio" name="group2" value="Juice"> Juice<br />
I want the user not to be able to click/change the radio list. And I want the radio button to be associated with the 'Juice' option.
This needs only to be compatible with Internet Explorer.
I cannot use JQuery! Please don't paste JQuery because it will not help me!
Thanks!
Simply apply the 'disabled' attribute to the elements that you want disabled and 'checked' to the default.
<input type="radio" name="group2" value="Water" disabled> Water
<input type="radio" name="group2" value="Water"> Lemonade
<input type="radio" name="group2" value="Water" checked> Juice
Just disable it with the "disabled" property.
Give it an "id" to fetch it more easily:
document.getElementById("radioButtonX").disabled = true;
(It doesn't matter how you get a reference to the DOM node of course.) You can re-enable the element by setting the property to false. When you disable it, you'll also have to set the "checked" property (to true) of whichever other button you'd like to be selected.
If you want to do it with HTML, you can use the attribute:
<input type=radio name=whatever value=xyz disabled=disabled> <!-- or just "disabled" with no value -->

Button with radio button functionality

I am wondering whether you can make a button, function like a HTML Radio button. I am trying to create a form where the user clicks on the said button and a value is thus selected, but the user is not directed until selecting another option and submitting the form. Does anyone know how to go about doing this?
(I don't mind the use of other languages including javascript etc.)
jQueryUI has a Button Widget that converts radio buttons or checkboxes into buttons.
Example from the site:
http://jqueryui.com/demos/button/#radio
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<div class="demo">
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
</div>
You can visit the link to see it in action.
First, on the page you're talking about, it sounds as if the user is taken somewhere else -- i.e., a submit-like action is taken -- merely by his selecting a radio button. I don't believe that this is the very best practice.
Second, you should imo keep the two radio buttons: they work great and, once selected, a radio button can't be cleared except by selecting another button. This is just what you want.
To be sure that the two buttons you require have been selected, give each button an onclick handler that sets a switch: some button in this group was selected.
Then, when he clicks submit, check those two switches and tell him if he forgot to click a button.
Yes, you need JavaScript to do all this.

hide textfields instantly when check a radio button

What I want is when the user chooses the first option the textfield will disappear and when the users chooses the second the textfield will appear again instantly. Here's some code:
<input type="radio" name="RadioGroup0" value="1" id="student" />
<input type="radio" name="RadioGroup0" value="0" id="not student" />
and want to hide/show this:
<label for="department">department:</label>
<input name="department" type="text" class="label" value="" />
I have tried anything so I'll appreciate any answer
On the click, keyup, and change events, show or hide the appropriate elements (jQuery makes this easier). The reason for handling all the events is that the value change may only be triggered after the element loses focus.
Happy coding.

Why am I submitting the form twice? jQuery submit() with radio button

I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?
Here is my jQuery
(function ($) {
$(document).ready(function () {
$(':radio').change(function () {
$('#frmMDR').submit();
});
});
})(jQuery);
and here is the form html
<form action="/Module/ModuleIndex" id="frmMDR" method="get">
<input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>
I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.
Cheers,
~ck in San Diego
You are getting two hits because two radio buttons are changing state. Radio buttons only allow one element in a group to be selected so when you are clicking a radio button, two events are happening:
A new radio button is selected
The previously selected radio button is deselected
This is two events and the reason why your code is being hit twice. To solve it you could give your radio buttons a class and then handle the event on click using the class as the selector.
<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
And your jQuery could be:
$('.radio').click(function () {
$('#frmMDR').submit();
});
You should probably just check for selected within the change function for which is selected. This way it'll only fire for the selected radio button, and you don't need to worry about binding or unbinding any events, and it should work regardless of what input method changed it.
Here's an article on handling events from check boxes and radio buttons in JQuery.

Categories