[P-181] Keyboard Control for Accessibility

[thiessenp-cds]

It is currently not possible to operate the form controls using a keyboard (only a mouse). By making the controls operable by a keyboard, a first step towards accessibility conformance would be taken (e.g. WCAG 2.1 + ARIA + ATAG). This would allow the editor to be used in large organizations that have accessibility requirements and help a lot of people out which would be awesome!

Steps

1. Go to 'anywhere in editor'
2. Try to navigate to any control by keyboard e.g. using the TAB key
3. Activate any control using ENTER/SPACE
4. The control is not reachable by keyboard

Sandbox

https://codesandbox.io/s/github/udecode/plate-playground

Expectation

All form controls can be operated by keyboard. (a future ticket could be about semantics like labels etc.)

Some background

• quick intro to accessible interaction https://www.w3.org/WAI/test-evaluate/preliminary/#interaction
• a basic example https://w3c.github.io/aria-practices/examples/menubar/menubar-editor.html

Environment

• slate: any
• slate-react: any
• browser: chrome (/any)

_P-181

[AleksandrHovhannisyan]

(Disclaimer: I'm not a Plate contributor, but I am a Slate user.)

Just noting this for context. whatever solution this involves will probably run into the limitation noted here, unless Plate addressed that issue internally: ianstormtaylor/slate#3412, where the editor selection becomes null whenever the editor loses focus. There are ways to fix that issue for when you click buttons outside the editor, but tabbing out of the editor while preserving a highlight is more problematic. You'd probably need to implement some sort of selection-saving mechanism or a "fake selection" like the one described here: ianstormtaylor/slate#3412 (comment) (Notion does this, for example).

Also, on my end, the CodeSandbox demo doesn't let me tab anywhere because tab is used for indentation. Is this the issue you were referring to?

[zbeyens]

Fake selection is probably the way to go, it would be a workaround to many other issues (e.g. having the focus in an "edit url" popup is hiding the editor selection highlight).

ianstormtaylor/slate#3412 (comment) is a nice attempt, though I'd go with cursor overlay or decorations as it should not be part of the document structure.

[zbeyens]

We know have an accessible toolbar https://platejs.org/