We are using p:textEditor (based on quill editor) in our application and we have more UI components below p:textEditor. The problem is for accessibility, the user need to tab through the components in the page using keyboard; but when it comes to p:textEditor a tab acts as adding a tab(4 spaces).
The primefaces showcase here also has the same problem, how can we navigate to the submit button from p:textEditor using keyboard?
Thanks Kukeltje, I disabled the tab key in quill editor.
For anyone who wants to do the same, you have to edit the texteditor.js file under META-INF/resources/primefaces/texteditor/ (when you reverse engineer the primefaces-version.jar (version=6.1 in my case)) and add the below code in render: function()
_render: function() {
...
this.cfg.modules = {
toolbar: PrimeFaces.escapeClientId(this.id + '_toolbar'),
keyboard: {
bindings: {
tab: {
key: 9,
handler: function() {
// do nothing
return true;
}
},
'remove tab': {
key: 9,
shiftKey: true,
collapsed: true,
prefix: /\t$/,
handler: function() {
// do nothing
return true;
}
}
}
}
};
...
}
For anyone who wants additional key customization can use the Quill Interactive Playground to validate your changes.