The wpView toolbar is not accessible by keyboard

[azaozz]

The (new) image toolbar is fully accessible by keyboard (Alt+F8 to focus, then arrow keys to move to the next button, etc.). However the wpView toolbar is not build in the same way so it is still not accessible.

[azaozz]

Ideally we should build this toolbar in the same way as the image toolbar. Best if/when the toolbar creation code is added to the TinyMCE API.

As there are only two buttons we probably can add keyboard shortcuts for now. Deleting a view can be done by selecting it and pressing Del, Backspace or just typing anything, so probably wouldn't need a shortcut. Wat would be a good shortcut for editing: Alt+Shift+E?

[afercia]

Replying to azaozz:
Thanks very much for the (new) image toolbar fixes.

What would be a good shortcut for editing: Alt+Shift+E?

If possible, what about to use Alt+F8 for consistency?

Tested the patch, now Audio/Video/Playlists details modals can be open via keyboard but focus is not moved to the modals.

[DrewAPicture]

Patch still applies.

@afercia: Care to follow up here?

[afercia]

Replying to DrewAPicture:

@afercia: Care to follow up here?

Not sure I can help here, this is Azaozz's territory :) In my opinion, for consistency this wpView toolbar should behave exactly like the image toolbar. We shouldn't ask users to learn each time new shortcuts/workflows. So it would be nice to stick with:

• Alt+F8: focus the toolbar
• arrows to move between buttons
• Enter to activate buttons
• Escape to close the toolbar

And when the modals open, focus should be moved to the modal.

[DrewAPicture]

@azaozz: How would you suggest we proceed making all forms of the wpView toolbars keyboard accessible? It sounds like currently, keyboard accessibility is handled in kind of a one-off basis depending on the context.

[azaozz]

After chatting a bit in #accessibility (the above link) the plan is:

• Abstract the toolbar creating functions so we can use them for images and wpViews.
• Add a wrapper for wpViews that will define the default buttons and let plugins add/override, or will handle toolbar creation from some setting, etc. Each view will have to have its own toolbar.

[iseulde]

Looking into this as I said during the bug scrub. Should be done by the weekend.

[iseulde]

Just uploading what I have so far. Needs a bit more work, but should work.

[iseulde]

I think it's best to add a separate plugin for this, so I will split it. The reposition method from 4.1 also needs to be improved... Ideally this should work for ranges too, not just nodes.

[azaozz]

In 31725:

TinyMCE:

• Abstract the code for creating floating toolbars.
• Introduce editor.wp namespace to hold exported methods from our plugins.
• Create the wpView toolbar(s) with the new method. This makes them work the same as the image toolbar: shortcuts, esc key, etc.

Props iseulde. See #30619.

[azaozz]

In 31727:

TinyMCE, floating toolbars: return early if no selected element in the editor. See #30619.

[azaozz]

In 31732:

TinyMCE: initialize the floating toolbars on preinit so we can attach other events on init.
Props iseulde. Fixes #30619.

[iseulde]

Let's keep this open for now, there is some more work to be done.

[iseulde]

Refocus the editor after updating or editing a view. Focus is moved away when opening the media modal, or when focussing the toolbar with shift+alt+f8.

[azaozz]

In 31972:

TinyMCE: always focus the editor after using the floated toolbar.
Props iseulde. Fixes #30619.