@randstad-design/orbit-multitheme/src/assets/js/components/accessible-link.js

multitheme Front-end code based on Randstad Human Forward components

/**
 * accessible-link.js
 * helper for making elements accessible links
 */

/**
 * Declare constants
 */
const attributeBase = 'data-rs-accessible-link';

export class AccessibleLink {
  constructor(element) {
    this.element = element;
    this.setAccessibleLink();
  }

  setAccessibleLink() {
    //handles clicks and keydowns on the link
    const _this = this;
    function navigateLink(e) {
      if (e.type === 'click' || e.key === 'Enter') {
        const href = _this.element.getAttribute('data-href');

        if (href) {
          window.location.href = href;
        }
      }
    }

    this.element.addEventListener('click', navigateLink);
    this.element.addEventListener('keydown', navigateLink);
  }

  /**
   * Get selector
   */
  static getSelector() {
    return `[${attributeBase}]`;
  }
}