accessible radio input trigger input on Space or Enter key-CodePudding

I have been looking at MDN documentation for element So what I'm trying to achieve is to make accessible radio buttons, so in my case I want user to be able to tab trough each of the radio buttons, and when he presses space or enter to trigger onChange event and make radio selected.

Here is how my base setup looks:

<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 for some reason its not working, I'm able to focus element but when I press Enter or Space nothing happens ?

CodePudding user response：

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" onchange="console.log('test 1')" />alpha</label></div>
  <div><label for="radio2"><input type="radio" name="rad" value="2" id="radio2" onchange="console.log('test 2')" />beta</label></div>
  <div><label for="radio3"><input type="radio" name="rad" value="3" id="radio3" onChange="console.log('test 3')" />gamma</label></div>
</fieldset>

CodePudding user response：

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.