<div class="steps">

  <button>Shop</button>
  <button>Cart</button>
  <button aria-current="step">Shipping</button>
  <button>Checkout</button>
  <button>Thank You</button>

  <div class="message"></div>

</div>

<div class="steps steps-2">

  <button aria-current="step">Shop</button>
  <button>Cart</button>
  <button>Shipping</button>
  <button>Checkout</button>
  <button>Thank You</button>

  <div class="message"></div>

</div>

<dl>
  <dt>Using:</dt>
  <dd><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-current"><code>aria-current</code></a></dd>
  <dt>Specifically the <code>step</code> value:</dt>
  <dd><q>Represents the current step within a process.</q></dd>
  <dt>Replaced:</dt>
  <dd><code>button.active</code></dd>
  <dt>With:</dt>
  <dd><code>button[aria-current="step"]</code></dd>
  <dt>Replaced:</dt>
  <dd><code>button.classList.remove("active");</code></dd>
  <dt>With:</dt>
  <dd><code>button.removeAttribute("aria-current");</code></dd>
  <dt>Replaced:</dt>
  <dd><code>button.classList.add("active");</code></dd>
  <dt>With:</dt>
  <dd><code>button.setAttribute("aria-current", "step");</code></dd>
</dl>

.steps {
  counter-reset: currentStep 0 remainder 0 totalStep 0;
}

button {
  counter-increment: totalStep;
}
button::before {
  content: "";
  counter-increment: currentStep;
}
button[aria-current="step"] ~ button::before {
  // prevents currentStep from being incremented!
  counter-increment: remainder;
}

.message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep);
}

.steps-2 .message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep) " ("
    counter(remainder) " to go!)";
}

// JUST FOR DEMO
button {
  border: 0;
  background: #a5d6a7;
  color: black;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-family: inherit;
}
button[aria-current="step"] {
  background: #43a047;
}
body {
  font: 110% system-ui;
  background: #eceff1;
  text-align: center;
}
.message {
  padding: 1rem;
  font-size: 2rem;
  font-weight: 900;
}
.steps {
  margin: 0 0 3rem 0;
}

dl > * {
  text-align: left;
}

const buttons = document.querySelectorAll("button");

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    let siblings = button.parentNode.querySelectorAll("button");
    siblings.forEach((button) => {
      button.removeAttribute("aria-current");
    });
    button.setAttribute("aria-current", "step");
  });
});