Accessibility issue with tab key

[JoseAntonioNavasSolutia]

Hello, sorry for my english. When you press the tab key inside the editor you expect it to navigate to another focusable element but the editor adds a /t and the user is stuck in the editor.

I use the Primevue Editor component but it is basically the quill editor component. I think it's a quill.js problem because I hit the tab key and it doesn't focus on the text area.

Reproducer

Reproductor: https://codesandbox.io/p/devbox/jovial-dust-66933x?file=%2Fsrc%2FApp.vue

PrimeVue version 3.46.0

Vue version 3.x

Language JavaScript

Build / Runtime Vue CLI App

Browser(s) Chrome

[benbro]

Related: https://stackoverflow.com/questions/53909477/how-to-handle-tabbing-for-accessibility-with-a-textarea-that-uses-the-tab-button

[jonatanschroeder]

I'm having the same issue. In our project we're using Quill directly (not via Vue), and there is no way to advance from the editor using tabs. Using a process like hitting Esc described in the comment above would be a good option, and would be compatible with how other editors like Ace do this (via enableKeyboardAccessibility).

[gilicaspi]

Hey all, I've been working on the same issue and found this old thread that had the solution: https://github.com/slab/quill/issues/2038#issuecomment-456335881

(Thanks @dexteritus!)

Setting the following within my quill config modules allows tabs to escape the editor:

keyboard: { bindings: { tab: true } }