Custom Select

				
					
const customSelect = document.querySelector('.custom-select');
const selectTrigger = document.querySelector('.select-trigger');
const optionsList = document.querySelector('.options-list');
const options = document.querySelectorAll('.options-list li');

let isOpen = false;

function toggleOptionsList() {
  isOpen = !isOpen;

  if (isOpen) {
    optionsList.style.display = 'block';
    selectTrigger.setAttribute('aria-expanded', 'true');
    optionsList.setAttribute('aria-hidden', 'false');

    // Set tabindex for options and focus the options list
    optionsList.querySelectorAll('li').forEach((option) => {
      option.setAttribute('tabindex', '0');
    });

    optionsList.focus();
    optionsList.addEventListener('keydown', collapseOnEscape);
    optionsList.addEventListener('keydown', navigateOptions);
    customSelect.addEventListener('focusout', collapseDropdown);
  } else {
    optionsList.style.display = 'none';
    selectTrigger.setAttribute('aria-expanded', 'false');
    optionsList.setAttribute('aria-hidden', 'true');

    // Reset tabindex for options and focus selectTrigger
    optionsList.querySelectorAll('li').forEach((option) => {
      option.setAttribute('tabindex', '-1');
    });

    selectTrigger.focus();
  }
}

function collapseOnEscape(event) {
  if (event.key === 'Escape') {
    isOpen = false;
    optionsList.style.display = 'none';
    selectTrigger.setAttribute('aria-expanded', 'false');
    selectTrigger.focus();
  }
}

function navigateOptions(event) {
  const focusedIndex = Array.from(options).indexOf(document.activeElement);
  if (event.key === 'ArrowDown') {
    event.preventDefault();
    const previousIndex = (focusedIndex - 1 + options.length) % options.length;
    options[previousIndex].focus();
  } else if (event.key === 'ArrowUp') {
    event.preventDefault();
    const nextIndex = (focusedIndex + 1) % options.length;
    options[nextIndex].focus();
  }
}

function collapseDropdown(event) {
  if (!event.relatedTarget || !optionsList.contains(event.relatedTarget)) {
    isOpen = false;
    optionsList.style.display = 'none';
    selectTrigger.setAttribute('aria-expanded', 'false');
    selectTrigger.focus();
  }
}

selectTrigger.addEventListener('click', toggleOptionsList);

optionsList.addEventListener('keydown', trapFocus);

options.forEach((option) => {
  option.addEventListener('click', () => {
    selectOption(option);
  });
  option.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      selectOption(option);
    } else if (event.key === 'ArrowDown') {
      navigateOptions(event);
    } else if (event.key === 'ArrowUp') {
      navigateOptions(event);
    } else if (event.key === 'Escape') {
      toggleOptionsList();
    }
  });
});

function selectOption(option) {
  selectTrigger.querySelector('#selectedOption').innerText = option.innerText;
  options.forEach((opt) => {
    opt.setAttribute('aria-selected', 'false');
  });
  option.setAttribute('aria-selected', 'true');
  setTimeout(() => {
    toggleOptionsList();
  }, 100);
}

function trapFocus(event) {
  const focusableElements = optionsList.querySelectorAll('li');
  const firstFocusable = focusableElements[0];
  const lastFocusable = focusableElements[focusableElements.length - 1];
  const isTabPressed = event.key === 'Tab' || event.keyCode === 9;

  if (!isTabPressed) {
    return;
  }

  if (event.shiftKey) {
    if (document.activeElement === firstFocusable) {
      event.preventDefault();
      lastFocusable.focus();
    }
  } else {
    if (document.activeElement === lastFocusable) {
      event.preventDefault();
      firstFocusable.focus();
    }
  }
}