QEditor - A11y issues

[Evertvdw]

What happened?

There are a few issues regarding accessibility in the current QEditor implementation.

1. When using a dropdown inside the toolbar with the keyboard the popup that opens does not contain the focus. You can tab outside this popup and move focus to the browser UI.
2. All buttons inside the toolbar do not have an aria-label supplied
3. When editing a link the remove button always has a tabindex of -1, so you can't use that with a keyboard
4. There is no help dialog/modal that informs users with a disability how to use the editor. See the image below of the example provided by TinyMce. There should be a described-by tag on the editor which mentions a shortcut to open such a modal (Alt + 0) is the combination used by CkEdtior and TinyMce. I think it should also be an option to add a help icon to the toolbar itself which opens the same help dialog.
   
5. Currently the toolbar is part of the normal tab order, when coming to the editor you want to focus the editable field first so you don't have to tab through the whole toolbar before reaching the editable field. The behaviour CkEditor and TinyMce use is that you can use a key combination (Alt + F10) to shift focus to the toolbar and use Escape to shift focus back to the edit field.

What did you expect to happen?

All Quasar components should be accessible out of the box :)

Reproduction URL

https://codepen.io/Mett-codepens/full/zYmOGwZ

How to reproduce?

Steps for the different points (when applicable)

1. Use keyboard to navigate to a dropdown inside the toolbar and use Enter/Space to open it. Inside the dropdown tab all the way to the end.
2. Inspect a button in the toolbar to see it has no aria-label
3. This one is difficult to inspect, because the link edit toolbar dissapears when it looses focus. Easiest way is to break on subtree modifications on the q-editor__toolbars-container element and then edit a link.

4. ---

5. Focus the dummy input and start tabbing from there. You go through the whole toolbar before reaching the editable field

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), Accessibility [a11y] (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response