demarches-normaliennes/app/javascript/new_design/support.js

//
// This content is inspired by w3c aria example, rewritten for better RGAA compatibility.
// https://www.w3.org/TR/wai-aria-practices-1.1/examples/disclosure/disclosure-faq.html
//

class ButtonExpand {
  constructor(domNode) {
    this.domNode = domNode;

    this.keyCode = Object.freeze({
      RETURN: 13
    });

    this.allButtons = [];
    this.controlledNode = false;

    var id = this.domNode.getAttribute('aria-controls');

    if (id) {
      this.controlledNode = document.getElementById(id);
    }

    this.radioInput = this.domNode.querySelector('input[type="radio"]');

    this.hideContent();

    this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
    this.domNode.addEventListener('click', this.handleClick.bind(this));
  }

  showContent() {
    this.radioInput.checked = true;

    if (this.controlledNode) {
      this.controlledNode.setAttribute('aria-hidden', 'false');
      this.controlledNode.classList.remove('hidden');
    }

    this.allButtons.forEach((b) => {
      if (b != this) {
        b.hideContent();
      }
    });
  }

  hideContent() {
    this.radioInput.checked = false;

    if (this.controlledNode) {
      this.controlledNode.setAttribute('aria-hidden', 'true');
      this.controlledNode.classList.add('hidden');
    }
  }

  toggleExpand() {
    if (
      this.controlledNode &&
      this.controlledNode.getAttribute('aria-hidden') === 'true'
    ) {
      this.showContent();
    } else {
      this.hideContent();
    }
  }

  setAllButtons(buttons) {
    this.allButtons = buttons;
  }

  handleKeydown(event) {
    switch (event.keyCode) {
      case this.keyCode.RETURN:
        this.showContent();

        event.stopPropagation();
        event.preventDefault();
        break;

      default:
        break;
    }
  }

  handleClick() {
    // NOTE: click event is also fired on input and label activations
    // ie., not necessarily by a mouse click but any user inputs, like keyboard navigation with arrows keys.
    // Cf https://www.w3.org/TR/2012/WD-html5-20121025/content-models.html#interactive-content

    this.showContent();
  }
}

/* Initialize Hide/Show Buttons */

if (document.querySelector('#contact-form')) {
  window.addEventListener(
    'DOMContentLoaded',
    function () {
      var buttons = document.querySelectorAll('fieldset[name=type] label');
      var expandButtons = [];

      buttons.forEach((button) => {
        var be = new ButtonExpand(button);
        expandButtons.push(be);
      });
      expandButtons.forEach((button) => button.setAllButtons(expandButtons));
    },
    false
  );
}