How to override the standard behavior of radio inputs inside of the radiogroup to be selectable with Tab key?

[KostiantynO]

Page Affected: https://developers.google.com/web/TODO #Question: #TODO: How to create a set of normal <button>s to behave like role="radiogroup", but each button to be selectable by the key , with HTML and CSS only, without JS?

Currently: If a set of <input type "radio" name="group-name"> has same "group-name", only a first <input> inside of the radiogroup will be selected by tab, and focus the will go to the next element in the DOM, forcing user to use left and right buttons to navigate between inputs instead of normal way with "Tab".

How to override the standard behavior of radio inputs inside of the radiogroup?

e.g. I want all bellow buttons or inputs to be selectable by "Tab" key. And at the same time I need STRICTLY one button to be active at one time.

<ul role="radiogroup">
<li><input role="radio">Option 1</button></li>
<li><input role="radio">Option 2</button></li>
<li><input role="radio">Option 3</button></li>
<li><input role="radio">Option 4</button></li>
<li><input role="radio">Option 5</button></li>
</ul>

<ul role="radiogroup">
<li><button role="radio">Option 1</button></li>
<li><button role="radio">Option 2</button></li>
<li><button role="radio">Option 3</button></li>
<li><button role="radio">Option 4</button></li>
<li><button role="radio">Option 5</button></li>
</ul>