Suggestions for toolbar accessibility

There has clearly been some effort made to make the quill editor and toolbar keyboard-accessible. As it is, you can do pretty much everything Quill has to offer without a mouse 👍

In developing with Quill, however, I’ve noticed a number of improvements that could be made to make the editor more accessible, particular for screenreaders.

Toolbar Buttons

• each toolbar button needs a label (aria-label/aria-labelledby)
• each toolbar button should have an attribute representing its state (aria-pressed)

Tooltips

• tooltips needs role="tooltip" and aria-hidden
• tooltip trigger needs aria-describedby="tooltip-id"

Select/Dropdowns

• each option needs an aria-label/aria-labelledby (currently, text only exists in stylesheets :before)
• The span that displays the selected option needs to be labeled (aria-label)
• The color contrast of selected option type is too low (1.61:1)
• Options are currently tab-able, but should function like native select/options (with arrow keys) (this is a nice-to-have)

Editor

• when there’s a placeholder, assign it to aria-placeholder
• Apply textbox="role" to the textarea-like box
• When multiline input is accepted, use aria-multiline
• When the text area is read-only, use aria-readonly

Picker

• the trigger needs to be labelled with the currently selected color (currently, only derived by the color of the button)
  • Each color in the picker needs a label (aria-label)

I’d be happy to help in implementing these – I just wanted to get feedback from maintainers before working on a PR.

[dexteritus]

@venkata82 try something like Editor.modules = { keyboard: { bindings: { tab: false } } };

[LadyArona]

Please keep improving the accessibility of this wonderful editor.