CODEWITHSUNDEEP
javascriptjquerycssfocusaccessibility
conno
conno

Reputation: 11

Stylized radio buttons not triggering on keyboard focus state

I'm having a problem with radio input buttons that I've appended to a div through jQuery. They work fine using a mouse, but when using the keyboard tab-focus state, it doesn't activate the final result.

NOTE: I've restyled the radio buttons to appear as rectangles holding the label names, using both visibility: hidden the radio button and used opacity: 0 on the inputs at varying times. was placed on the label to override the quirk of event listeners on append -- doesn't seem to work on the input.

Hopefully this is enough code to get an idea of what's happening, but if not, please let me know!

jQuery

function displayCountries = (filteredResults) => {
    $countries.append(`
          <p>Choose your country</p>
          <form class="countriesFlex"></form>
    `);

    filteredResults.forEach((result) => {
          $('.countriesFlex').append(`
              <input type="radio" id="${result.origin}" name="country" value="${result.origin}" aria-hidden="true">
              <label for="${result.origin}" aria-label="click to display item with origin of ${result.origin}" tabindex = "0"> ${result.origin}</label>
          `);
   });
};

CSS

label,
input,
[type=submit],
a {
    border: 3px solid transparent;
    &:hover {
        transform: scale(1.1);
    }
    &:focus {
        border: 3px solid $accent;
        outline: none;
    }
}

.countries {
    padding: 0px 0px 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .countriesFlex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 30px;
        max-width: 600px;
        margin: 0 auto;
    }
    label {
        padding: 15px 30px;
        margin: 10px;
        border-radius: 5px;
        background-color: $secondary;
        color: $primary;
        text-align: center;
    }
    input {
        visibility: hidden;
        width: 0px;
    }
}


  [1]: https://jsfiddle.net/conno/rdantc03/8/

Upvotes: 1

Views: 1409

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24905

The problem is to do with how you handle the click event.

You see when you click on a <label> with the mouse it will activate any related checkbox / radio <input>.

However as labels should not be accessible via the keyboard there is no built in logic that if you press Space (as you would on a radio input) that it should fire a click event.

You currently use [name=country] as your CSS selector that fires the click event.

This works with the mouse as when you click the label it passes the click event to the corresponding input (which has the associated click event handler attached to it) and therefore works.

However when you press Space while a label is selected this is not passed to the corresponding <input> where your handler is attached.

You could do

$('label').click(function() {
       var labelID = $(this).attr('for');
       $('#'+labelID).trigger('click');
});

As a workaround as this would effectively pass the click event through to the input (I think (the above is untested), if not then you would listen for <space> being pressed on the label and pass that through to the related input).

To ensure correct labelling I would recommend reading https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accessible-radio-buttons as it illustates how to use <fieldset> and <legend> plus tips for styling custom radio buttons which you could adapt.

Upvotes: 0

Related Questions