矢印キーで選ぶラジオグループ

<div class="d08-10-04-group" role="radiogroup" aria-label="配送方法">
          <button class="d08-10-04-opt is-checked" type="button" role="radio" aria-checked="true" tabindex="0">通常配送</button>
          <button class="d08-10-04-opt" type="button" role="radio" aria-checked="false" tabindex="-1">お急ぎ便</button>
          <button class="d08-10-04-opt" type="button" role="radio" aria-checked="false" tabindex="-1">店舗受取</button>
        </div>

.d08-10-04-group{display:inline-flex;gap:10px;padding:6px;background:#f7f7fb;border-radius:14px}
        .d08-10-04-opt{background:#fff;border:1.5px solid #e2e2e8;border-radius:10px;padding:10px 14px;font-size:12.5px;font-weight:600;color:#555;cursor:pointer;outline:none;transition:transform .2s,border-color .2s,background .2s,color .2s}
        .d08-10-04-opt.is-checked{background:#6a5cff;border-color:#6a5cff;color:#fff;transform:scale(1.06)}
        .d08-10-04-opt:focus-visible{box-shadow:0 0 0 3px rgba(106,92,255,.28)}

(function(){
        var group=document.querySelector('#item-08-10-04 .d08-10-04-group');if(!group)return;
        var opts=[].slice.call(group.querySelectorAll('.d08-10-04-opt'));
        function select(idx,focus){
          opts.forEach(function(o,i){
            var on=i===idx;
            o.classList.toggle('is-checked',on);
            o.setAttribute('aria-checked',on?'true':'false');
            o.tabIndex=on?0:-1;
          });
          if(focus)opts[idx].focus();
        }
        opts.forEach(function(o,i){
          o.addEventListener('click',function(){select(i,false);});
          o.addEventListener('keydown',function(e){
            var cur=opts.indexOf(o);
            if(e.key==='ArrowRight'||e.key==='ArrowDown'){e.preventDefault();select((cur+1)%opts.length,true);}
            else if(e.key==='ArrowLeft'||e.key==='ArrowUp'){e.preventDefault();select((cur-1+opts.length)%opts.length,true);}
          });
        });
      })();