I'm facing an issue with radio input buttons that I've dynamically added to a div using jQuery. They function properly when clicked with a mouse, but do not get activated when using the keyboard tab-focus state.
NOTE: To style the radio buttons as rectangles holding label names, I have used visibility: hidden for the radio button and opacity: 0 for the inputs at different times. Despite adding aria-hidden attribute and tabindex = "0" on the labels to overcome event listener quirks on append, it does not seem to work correctly with the input elements.
I hope this code snippet provides enough context to understand the situation, but feel free to reach out if more details are needed!
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/