Simplemde-markdown-editor: Keyboard trap

[iainsimmons]

You're probably already aware of this, but tabbing into the editor creates a keyboard trap, which severely hampers its accessibility.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html

I'm not sure of the best solution, but perhaps Shift-Tab with the cursor position at the start should go up to the toolbar and then back out to the previous tab-able/focusable element, and Tab with the cursor at the end should exit the editor.

Or allow escaping the editor with the escape key?

[WesCossick]

Something to be considered. I'm leaning toward the escape key exiting the editor.

[rastapopougros]

I think it must be a good thing to read some literature on this subject, because I'm pretty sure there is already some advices and even some strong recommendations from W3C or from other accessibility community.

On this same subject, buttons should be also accessible with keyboard and in a reader, with some right aria attributes.

[jrsinclair]

On this same subject, buttons should be also accessible with keyboard and in a reader, with some right aria attributes.

@rastapopougros This is definitely an issue. Perhaps it's worth it's own issue thread? Or even a PR? 😉

[dylanfisher]

How about an option of disabling the custom tab key indent behavior inside the editor altogether? I don't find myself pressing tab very often to indent markdown, and if I do pressing the space bar twice is easy.

This is better than the keyboard trap IMO.

[jrsinclair]

I like both the ESC key and the disable tab ideas 🙂 I think both would enhance accessibility and usability.

[iainsimmons]

Yes, and/or setting an alternative key-binding for inserting a tab character. Can't remember what the behaviour is for a regular textarea

[cvle]

I'd love to see this customisable like the other Keyboard shortcuts. Ping me if you need some help.

[lumenwrites]

Is there a workaround I can use to disable the tab shortcut for now? It's really important for my app to make it so that when the user presses tab he is switched to the next input field.

[lawmbass]

This was the method I used as a workaround @raymestalez

editor = new SimpleMDE();
editor.codemirror.options.extraKeys['Tab'] = false;
editor.codemirror.options.extraKeys['Shift-Tab'] = false;