Take the toolbar out of the tab sequence.

[AlanObject]

When you create a quill-editor component with a toolbar, each of the toolbar buttons and controls end up in the tab sequence. So if the editor is part of a form the user experience is that when they tab from the prior control (say the title) to the editor the focus ends up on the first button, not the content window.

To get to the content window they have to tab over all the buttons and there is about a dozen of them. So tab navigation is pretty useless. The user has to resort the the pointing device before they can edit.

We need an option (or a method) of taking the toolbar controls out of the tab sequence. Note that this is how this github page works. The tab key takes you from the title to the content.

I have a workaround which is rude and crude but it works. Like this which is called on the editor create event:

  fixupEditor(event: Quill) {
    const quillEditors = document.querySelectorAll('quill-editor');
    quillEditors.forEach(editor => {
      const elements = editor.querySelectorAll('button, .ql-picker-label');
      elements.forEach(element => element.setAttribute('tabindex', '-1'));
    });
  }

Is there a better way of doing this that I missed or do we need to change the implementation?

[KillerCodeMonkey]

#521

#1311

There is the possibility to deactivate the tab key handling in quilljs.

And there are already open issues to improve accessibility.