custom radio tabIndex без javascript?

Question

Я могу применить tabindex к собственным переключателям и использовать tab, чтобы изменить значение с помощью arrow up и arrow down на клавиатуре. Но могу ли я сделать то же самое с настраиваемым радио, где фактическое <input type="radio" /> скрыто?

https://stackblitz.com/edit/react-ts-7lgfpk?file=index.tsx

Answer 1

Вместо display:none; вы можете оставить свои собственные переключатели и просто изменить их стиль, чтобы они не казались видимыми, но по-прежнему функционировали так, как вы ожидаете.

Только один из подходов, которые вы можете попробовать в вашем style.css:

.radioBtn input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

Кроме того, если вы хотите перейти с помощью клавиши tab к своей группе настраиваемых переключателей, вы можете включить эту функцию для элемента метки переключателя:

const Radio = ({
  id,
  name,
  value,
  defaultChecked,
  onChange,
  children,
  tabIndex
}) => (
  <div
  className="radioBtn"
  >
    <input
      type='radio'
      defaultChecked={defaultChecked}
      value={value}
      id={id}   
      name={name}
      onChange={onChange}
      tabIndex={tabIndex}
    />
    <label className="radio" htmlFor={id}  tabIndex={tabIndex}>
      <span className="big">
        <span className="small"></span>
      </span>
      <span>{children}</span>
    </label>
  </div>
);