Formio Builder configuration with accessibility

[DonAmit197]

Hi, I'm using formio-react to build a custom builder. I have concern about integrating accessibility configuration in the builder. I understand the fields are drag and drop using Dragula. Is there any chance for any addition of using a 'Tab' key for adding fields into the builder?

Thanks in advance.

[lane-formio]

This can actually be done on a per-form basis by adding keyboardBuilder = true as a custom property in form settings. The related PRs can be found here and [here] (https://github.com/formio/formio.js/pull/5152).

[DonAmit197]

@lane-formio , I have tried the way you suggested but it doesn't suffice my requirement, instead what I did I have added a tabindex="0" to the formcomponent

const sideBarBtns = document.querySelectorAll(".formcomponent.drag-copy");
  sideBarBtns.forEach((btn) => {
    //console.log(btn);
    btn.setAttribute("tabIndex", "0");
    btn.addEventListener("keydown", function (e) {
      performOnEnter(e);
    });
  });

and the tabIndex works fine. Now my intension is to open the Edit modal screen on "keydown" event. To make this happen I feel that I have to extend the WebformBuilder class. I'm importing the formiojs by var _formiojs = require("formiojs"); There I can see are few methods like initDragula, onDrop. Could you please suggest which method I should trigger?

Thanks in advance

[DonAmit197]

At least got some success to open the edit modal on hitting the Enter key. Created a new method

WebformBuilder.default.prototype.addKeyBoardEvent = function () {
  console.log('ADDKEYB', this);
  this.refs['sidebar-component'].forEach((component) => {
    component.setAttribute('tabindex', '0');
    this.addEventListener(component, 'keydown', (event) => {
      if (event.keyCode === 13) {
        this.addNewComponent(component);
      }
    });
  });

  const componentEdit = this.componentEdit;
  const _self = this;
  if (componentEdit) {
    const removeBtn = componentEdit.querySelector('[ref="removeButton"]');
    removeBtn.addEventListener('keydown', (event) => {
      if (event.keyCode === 13) {
        console.log(this);
        //this.saved = true;
        //this.editForm.detach();
        //this.removeComponent();
        _self.dialog.close();
        //this.highlightInvalidComponents();
      }
    });
  }
};

called the method inside

WebformBuilder.default.prototype.initDragula = function () {
 this.addKeyBoardEvent();
}

But I can observe (however I can understand that I'm doing wrong somewhere) that on hitting the "Enter" key on the "Save" button it's not working. Throwing an error "Cannot read properties of null (reading 'component')" . Any idea or feedback on this? Appreciate any help. Thanks.