accessible dropdown component in javascript

<label for="my-dropdown">Select an option:</label>
<div role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-owns="dropdown-list" id="my-dropdown">
  <input type="text" placeholder="Select an option">
  <ul id="dropdown-list">
    <li id="option1">Option 1</li>
    <li id="option2">Option 2</li>
    <li id="option3">Option 3</li>
  </ul>
</div>

<script>
  var dropdown = document.getElementById('my-dropdown');
  var input = dropdown.querySelector('input');
  var list = dropdown.querySelector('ul');
  var options = dropdown.querySelectorAll('li');

  // When combobox is clicked, toggle aria-expanded attribute
  dropdown.addEventListener('click', function() {
    var expanded = dropdown.getAttribute('aria-expanded') === 'true';
    dropdown.setAttribute('aria-expanded', !expanded);
    if (!expanded) {
      input.focus(); // Set focus on input field when dropdown is opened
    }
  });

  // When option is clicked, update text of input and aria-activedescendant attribute
  options.forEach(function(option) {
    option.addEventListener('click', function() {
      input.value = option.textContent;
      dropdown.setAttribute('aria-activedescendant', option.id);
      closeDropdown();
    });
  });

  // When Escape or Tab key is pressed while dropdown is open, close dropdown
  input.addEventListener('keydown', function(event) {
    if (event.keyCode === 27 || event.keyCode === 9) {
      event.preventDefault();
      closeDropdown();
    }
  });

  // Helper function to close dropdown and update aria-expanded attribute
  function closeDropdown() {
    dropdown.setAttribute('aria-expanded', 'false');
    input.focus();
  }
</script>
1670 chars
49 lines