フォーカス移動を示すステップインジケータ

<div class="d08-10-09-steps" role="group" aria-label="入力ステップ">
          <button class="d08-10-09-step is-active" type="button">1<span>お届け先</span></button>
          <button class="d08-10-09-step" type="button">2<span>お支払い</span></button>
          <button class="d08-10-09-step" type="button">3<span>確認</span></button>
          <span class="d08-10-09-line" aria-hidden="true"><span class="d08-10-09-fill"></span></span>
        </div>

.d08-10-09-steps{position:relative;display:flex;gap:30px;padding:10px 6px}
        .d08-10-09-line{position:absolute;left:22px;right:22px;top:29px;height:3px;background:#e5e7eb;border-radius:2px;z-index:0}
        .d08-10-09-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,#6a5cff,#a44bff);border-radius:2px;transition:width .35s cubic-bezier(.3,1,.4,1)}
        .d08-10-09-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font-size:13px;font-weight:700;color:#9aa0ac;outline:none}
        .d08-10-09-step::before{content:'';display:block;width:26px;height:26px;line-height:26px;border-radius:50%;background:#e5e7eb;color:#fff;font-size:12px;text-align:center}
        .d08-10-09-step span{font-size:10px;font-weight:600;color:#9aa0ac}
        .d08-10-09-step.is-active{color:#6a5cff}
        .d08-10-09-step.is-active::before{background:#6a5cff}
        .d08-10-09-step.is-active span{color:#6a5cff}
        .d08-10-09-step:focus-visible::before{box-shadow:0 0 0 3px rgba(106,92,255,.3)}

(function(){
        var group=document.querySelector('#item-08-10-09 .d08-10-09-steps');if(!group)return;
        var steps=[].slice.call(group.querySelectorAll('.d08-10-09-step'));
        var fill=group.querySelector('.d08-10-09-fill');
        function activate(step){
          var idx=steps.indexOf(step);
          steps.forEach(function(s,i){s.classList.toggle('is-active',i<=idx);});
          fill.style.width=(idx/(steps.length-1)*100)+'%';
        }
        steps.forEach(function(s){
          s.addEventListener('focus',function(){activate(s);});
          s.addEventListener('click',function(){activate(s);});
        });
      })();