Solución - navegación con ratón así como con tabulación

// Seleccionar las casillas de verificación
const casillas de verificación = documento.querySelectorAll('input[type="checkbox"]');

// Seleccionar el conjunto de campos que contiene las entradas de casilla de verificación
const checkboxSet = documento.querySelector('fieldset.heroes');

// PARA NAVEGACIÓN CON RATÓN
// Crear una variable para almacenar la casilla de verificación actual
let currentCheckbox;
// escuchar un evento de enfoque dentro del conjunto de campos
checkboxSet.addEventListener('click', (e) => {
  // si el elemento en el que se hizo clic fue una casilla de verificación
  if (e.target.type === checkbox) {
    // borrar casilla de verificación anterior
    if (currentCheckbox) {
      // eliminar la clase de enfoque
      currentCheckbox.classList.remove('focus');
      // También eliminar la clase 'focus' del elemento de etiqueta principal
      currentCheckbox.parentElement.classList.remove('focus');
    }
    // establecer currentCheckbox en el elemento en el que se hizo clic        
    currentCheckbox = e.target;
    // agregar la clase 'focus' a la casilla de verificación
    currentCheckbox.classList.add('focus');
    // agregar la clase 'focus' al elemento de etiqueta principal
    currentCheckbox.parentElement.classList.add('focus');
  }
});

// PARA NAVEGACIÓN POR TABULACIÓN
// Recorrer cada casilla de verificación
casillas de verificación.forEach(checkbox => {
// Paso 3: Agregar un detector de eventos para el evento 'focus' a cada casilla de verificación
  checkbox.addEventListener('focus', () => {
  // Paso 3.1: Cuando una casilla de verificación obtiene el enfoque, agregar la clase 'focus' a la casilla de verificación
    checkbox.classList.add('focus');
  // Paso 3.2: También agregar la clase 'focus' al elemento de etiqueta principal
    checkbox.parentElement.classList.add('focus');
  });

// Paso 4: Agregar un detector de eventos para el evento 'blur' a cada casilla de verificación
  checkbox.addEventListener('blur', () => {
  // Paso 4.1: Cuando una casilla de verificación pierde el enfoque, eliminar la clase 'focus'
    checkbox.classList.remove('focus');
  // Paso 4.2: También eliminar la clase 'focus' del elemento de etiqueta principal
    checkbox.parentElement.classList.remove('focus');
  });
});