ckeditor_a11ychecker-8.x-1.x-dev/js/ckeditor5_plugins/a11ychecker/src/A11ycheckerUI.js

import { Plugin } from "ckeditor5/src/core";
import {ButtonView} from "ckeditor5/src/ui";
import icon from "../../../../icons/a11y.svg";

export default class A11ycheckerUI extends Plugin {

  init() {
    const editor = this.editor;

    // Add the data id attribute to the DOM element so that it only acts on the current editor instance
    editor.editing.view.change(writer => {
      const viewEditableRoot = editor.editing.view.document.getRoot();
      writer.setAttribute( 'data-ckeditor-a11y', editor.id, viewEditableRoot );
    });

    editor.ui.componentFactory.add('a11ychecker', (locale) => {
      const button = new ButtonView(locale);
      button.set({
        label: editor.t('Accessibility Checker'),
        icon,
        tooltip: true,
      });

      // Execute a callback function when the button is clicked.
      button.on('execute', (event) => {
        this._checkDoc(event, editor.id);
      });
      return button;
    })
  }

  _checkDoc(event, id) {
    if(!event.path[0].isEnabled){
      event.stop();
    }

    // Remove the sa11y class from all ck-editor__editable elements
    document.querySelectorAll('.ck-editor__sa11y').forEach((el) => {
      el.classList.remove('ck-editor__sa11y');
    });

    // Add the editor__sa11y to indicate the active editor
    document.querySelectorAll('.ck-editor__editable[data-ckeditor-a11y="' + id + '"]').forEach((el) => {
      el.classList.add('ck-editor__sa11y');
    });

    // Initialize Sa11y if it hasn't been initialized yet.
    if (!customElements.get('sa11y-heading-label')) {
      Sa11y.Lang.addI18n(Sa11yLangEn.strings);
      window.sa11y = new Sa11y.Sa11y({
        checkRoot: '.ck-editor__sa11y',
      });
    }
    else {
      // If Sa11y has already been initialized, just recheck with the new active editor.
      window.sa11y.resetAll();
      window.sa11y.checkAll();
    }

    // Disable the button
    //event.path[0].isEnabled = false;
  }
}