Accessibility: Make Unslider pagination and arrows keyboard accessible

oxygen-unslider-pagination-accessibility.js

(function () {
  function activateWithKeyboard(element, event) {
    var key = event.key;

    if (key === 'Enter' || key === ' ') {
      event.preventDefault();
      element.click();
    }
  }

  function enhanceControl(element, label) {
    if (!element) {
      return;
    }

    if (!element.hasAttribute('tabindex')) {
      element.setAttribute('tabindex', '0');
    }

    var tagName = element.tagName.toLowerCase();
    var isNativeButton = tagName === 'button';
    var isLinkWithHref = tagName === 'a' && element.hasAttribute('href') && element.getAttribute('href') !== '';

    if (!isNativeButton && !isLinkWithHref) {
      element.setAttribute('role', 'button');
    }

    if (label && !element.hasAttribute('aria-label')) {
      element.setAttribute('aria-label', label);
    }

    if (element.dataset.a11yKeyHandler !== 'true') {
      element.dataset.a11yKeyHandler = 'true';

      element.addEventListener('keydown', function (event) {
        activateWithKeyboard(element, event);
      });
    }
  }

  function updateDots(nav) {
    if (!nav) {
      return;
    }

    var dots = nav.querySelectorAll('li');

    dots.forEach(function (dot, index) {
      enhanceControl(dot, 'Go to slide ' + (index + 1));
      dot.setAttribute('aria-roledescription', 'slide');

      if (dot.classList.contains('unslider-active')) {
        dot.setAttribute('aria-current', 'true');
      } else {
        dot.removeAttribute('aria-current');
      }
    });
  }

  function updateArrows(scope) {
    if (!scope) {
      return;
    }

    var prevSelectors = [
      '.unslider-arrow.prev',
      '.unslider-prev',
      '.prev'
    ];

    var nextSelectors = [
      '.unslider-arrow.next',
      '.unslider-next',
      '.next'
    ];

    prevSelectors.forEach(function (selector) {
      scope.querySelectorAll(selector).forEach(function (arrow) {
        enhanceControl(arrow, 'Previous slide');
      });
    });

    nextSelectors.forEach(function (selector) {
      scope.querySelectorAll(selector).forEach(function (arrow) {
        enhanceControl(arrow, 'Next slide');
      });
    });
  }

  function updateSliderScope(scope) {
    if (!scope || !(scope instanceof HTMLElement)) {
      return;
    }

    if (scope.matches('.unslider-nav')) {
      updateDots(scope);
    }

    scope.querySelectorAll('.unslider-nav').forEach(function (nav) {
      updateDots(nav);
    });

    updateArrows(scope);
  }

  function initAllUnsliders() {
    updateSliderScope(document);
  }

  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      if (mutation.target instanceof HTMLElement) {
        updateSliderScope(mutation.target);
      }

      mutation.addedNodes.forEach(function (node) {
        if (node instanceof HTMLElement) {
          updateSliderScope(node);
        }
      });
    });
  });

  function start() {
    initAllUnsliders();

    observer.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ['class']
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', start);
  } else {
    start();
  }

  window.addEventListener('load', initAllUnsliders);
  setTimeout(initAllUnsliders, 500);
  setTimeout(initAllUnsliders, 1500);
})();