Forcing a tab stop on a hidden element? Possible?
Keep the radio input hidden, but set tabindex="0"
on the <label>
element of reach radio input.
(A tab index of 0 keeps the element in tab flow with other elements with an unspecified tab index which are still tabbable.)
a working solution in my case to enable tab selection / arrow navigation was to set the opacity to zero rather than a "display: none"
.styled-selection input {
opacity: 0; // hide it visually
z-index: -1; // avoid unintended clicks
position: absolute; // don't affect other elements positioning
}