Solution - mouse as well as tab navigation

// Select the checkboxes
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// Select the fieldset which contains the checkbox inputs
const checkboxSet = document.querySelector('fieldset.heroes');

// FOR MOUSE NAVIGATION
// Create a variable for storing the current checkbox
let currentCheckbox;
// listen for a focus event within the fieldset
checkboxSet.addEventListener('click', (e) => {
  // if the clicked item was a checkbox
  if (e.target.type === "checkbox") {
    // clear previous checkbox
    if (currentCheckbox) {
      // remove the focus class
      currentCheckbox.classList.remove('focus');
      // Also remove the 'focus' class from the parent label element
      currentCheckbox.parentElement.classList.remove('focus');
    }
    // set currentCheckbox to the clicked item        
    currentCheckbox = e.target;
    //add the 'focus' class to the checkbox
    currentCheckbox.classList.add('focus');
    // add the 'focus' class to the parent label element
    currentCheckbox.parentElement.classList.add('focus');
  }
});

// FOR TAB NAVIGATION
// Loop through each checkbox
checkboxes.forEach(checkbox => {
// Step 3: Add an event listener for the 'focus' event to each checkbox
  checkbox.addEventListener('focus', () => {
  // Step 3.1: When a checkbox gains focus, add the 'focus' class to the checkbox
    checkbox.classList.add('focus');
  // Step 3.2: Also add the 'focus' class to the parent label element
    checkbox.parentElement.classList.add('focus');
  });

// Step 4: Add an event listener for the 'blur' event to each checkbox
  checkbox.addEventListener('blur', () => {
  // Step 4.1: When a checkbox loses focus, remove the 'focus' class
    checkbox.classList.remove('focus');
  // Step 4.2: Also remove the 'focus' class from the parent label element
    checkbox.parentElement.classList.remove('focus');
  });
});