在modal :first-child和:last-child伪选择器关系中使用Tab键

<div class="modal">
  <button class="close-button">Close</button>
  <input type="text" placeholder="First input">
  <input type="text" placeholder="Second input">
  <button>Submit</button>
</div>

.modal :first-child:focus {
  outline: 2px solid blue;
}

.modal :last-child:focus {
  outline: 2px solid red;
}

document.addEventListener('keydown', function(event) {
  const modal = document.querySelector('.modal');
  const firstFocusableElement = modal.querySelector(':focusable');
  const lastFocusableElement = modal.querySelectorAll(':focusable').pop();

  if (event.key === 'Tab') {
    if (event.shiftKey && document.activeElement === firstFocusableElement) {
      event.preventDefault();
      lastFocusableElement.focus();
    } else if (!event.shiftKey && document.activeElement === lastFocusableElement) {
      event.preventDefault();
      firstFocusableElement.focus();
    }
  }
});