Initiate toggle functionality.

index.html

<button aria-pressed="false" aria-label="Toggle something">I'm a toggle button!</button>
<button aria-checked="false" role="switch" aria-label="Switch something">I'm a switch!</button>

toggle.js

/**
 * Initiate toggle items, such as ARIA buttons.
 * @param {string} selector - The selector of the item to target.
 * @param {string} attribute - The Boolean attribute to toggle.
 * @param {string} [event=click] - The event to target.
 */
function initiateToggleItems(selector, attribute, event = 'click') {
  const items = document.querySelectorAll(selector);

  items.forEach((item) => {
    item.addEventListener(event, function toggleAttribute() {
      const isActive = this.getAttribute(attribute) === 'true';

      this.setAttribute(attribute, String(!isActive));
    });
  });
}

initiateToggleItems('[aria-pressed]', 'aria-pressed');
initiateToggleItems('[aria-checked][role="switch"]', 'aria-checked');