<form onsubmit="return false">
  <h3>Custom html radios</h3>
  <fieldset>
    <legend>Shipment type:</legend>
    <div>
      <!-- See Aria Example Here -->
      <div id="custom_standard" class="custom-radio" role="radio" aria-checked="false">
        <label for="custom_standard">Standard</label>
      </div>
    </div>

    <div>
      <!-- See Aria Example Here -->
      <div id="custom_sameday" class="custom-radio" role="radio" aria-checked="false">
        <label for="custom_sameday">Same day</label>
      </div>
    </div>
  </fieldset>
  
  <h3>Native html radios</h3>
  <fieldset>
    <legend>Shipment type:</legend>
    <div>
      <input 
        type="radio"
        id="native_standard"
        name="shipment_type"
        value="standard"
        checked
      >
      <label for="native_standard">Standard</label>
    </div>

    <div>
      <input
        type="radio"
        id="native_sameday"
        name="shipment_type"
        value="sameday"
      >
      <label for="native_sameday">Same day</label>
    </div>
  </fieldset>
</form>

* {
  font-family: sans-serif;
}

fieldset div {
/*   margin: 10px; */
}

.custom-radio {
  display: inline-block;
  position: relative;
}

.custom-radio, .custom-radio > label:hover {
  cursor: pointer;
}

.custom-radio:before {
  display: inline-block;
  content: '';

  height: 8px;
  width: 8px;
  margin-right: 5px;
    
  border: 1px solid #777;
  border-radius: 100px;
  vertical-align: middle;
}


.custom-radio.checked:after {
  display: inline-block;
  content: '✔';
  
  position: absolute;
  top: -2px;
  right: 2px;
  bottom: 2px;
  left: 0.4px;

  font-size: 14px;
}

.custom-radio + label {
  display: inline-block;
}

const radios = document.getElementsByClassName("custom-radio");

[...radios].forEach((radio) => {
  radio.addEventListener('mouseup', handleClick);
});

function handleClick() {
  [...radios].filter(r => r.classList.contains("checked")).forEach(r => {
    r.classList.remove("checked");
    r.setAttribute('aria-checked', false);
  });
  
  this.classList.add("checked");
  console.log(this);
  this.setAttribute('aria-checked', true);
}