Form Builder is not keyboard accessible

[Plonq]

Describe the bug Not sure whether this should be a bug report or feature request, but the form builder is unusable with a keyboard. This doesn't just apply to the open source version, the SaaS platform has the same issue.

It's impossible to add components using just the keyboard, and it's also not possible to manipulate existing components. I can tab focus to select components in the sidebar, but that's all. Tabbing through components themselves doesn't really work - the hover/floating buttons never show up - and it's possible to get stuck inside a wysiwyg editor where tab just inserts a tab character.

There's an undocumented form builder option called keyboardBuilder, which, when set to true, doesn't help at all. In fact, it makes the component items in the sidebar unfocusable. The SaaS platform exhibits this behaviour too. The existence of this option suggests that the builder should be usable with keyboard, but it seems the option is broken.

UPDATE: I can get the keyboardBuilder option working, however it has a few issues that make it impossible to use the builder without a mouse. I have listed the major issues in this comment: https://github.com/formio/formio.js/issues/5611#issuecomment-2130534401

Version/Branch formiojs 4.19.3 Also the official SaaS platform

To Reproduce Steps to reproduce the behavior:

1. Open the form builder
2. Focus the search box
3. Using just the keyboard, attempt to add a component

Expected behavior I expect to be able to add components, move them around, edit them, and so on, using just the keyboard.

Screenshots It's hard to show keyboard behaviour in screenshots or video, but this is easy to reproduce.

[lane-formio]

Have you tried adding the keyboardBuilder as a custom property in the form settings?

[Plonq]

Have you tried adding the keyboardBuilder as a custom property in the form settings?

Sorry I'm not sure what you mean. I have tried this, as I explained in the description:

new FormBuilder(
  document.querySelector("#form-builder"),
  {},
  { keyboardBuilder: true },
)

Is a "custom property in the form settings" different to that? If so can you explain more?

[lane-formio]

I initially did this on portal.form.io by just navigating into a form and accessing the settings for that particular form, but I was also able to accomplish this here: https://jsfiddle.net/dymL25ro

Formio.builder(document.getElementById('builder'), {
"properties": {
        "keyboardBuilder": "true"
    },
});

[Plonq]

Thanks. I'll try it again, but in the meantime I've noticed several issues with that jsfiddle which make this unsuitable for keyboard only usage.

1. If I press Enter on a component, and then inside the settings dialog tab down to the Description field, then I get stuck - tab key just adds tab characters, there's nothing I can do to get out (without using mouse)
2. After adding the component to the form, it goes into like a 'reorder' mode, where I can use arrow keys to move the component around the form. After pressing Enter to save that location, I have no idea how to get back into that reorder mode in order to move components around.
3. I couldn't find a way to open up the dialog for an existing component, remove a component, or otherwise manipulate existing components on the form

[Plonq]

I can confirm I can get the keyboardBuilder option working as shown in the jsfiddle linked above (I had a bug in one of my edit form template overrides). However, all the issues I stated still remain, making it ultimately unusable without a mouse.

[lane-formio]

Thanks for the input @Plonq

I'll get this in front of our planning team for review, but in the meantime, if you (or anyone else) would like to take a stab at this we always welcome any PR submissions for inclusion within the platform.

Internal ticket reference: FIO-8441

[olgabann]

Internal ticket reference: FIO-8444 - all issues, described in the ticket

[lane-formio]

After review, we don't expect to resource a developer to investigate this in the near future but would be happy to review any contributions to resolve this behavior.