WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#30619 closed defect (bug) (fixed)

The wpView toolbar is not accessible by keyboard

Reported by: azaozz Owned by: iseulde
Milestone: 4.2 Priority: normal
Severity: normal Version: 3.9
Component: TinyMCE Keywords: has-patch
Focuses: accessibility, javascript Cc:

Description

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.

Attachments (7)

30619.patch (868 bytes) - added by azaozz 5 years ago.
30619.2.patch (25.5 KB) - added by iseulde 4 years ago.
30619.3.patch (27.2 KB) - added by iseulde 4 years ago.
30619.4.patch (27.3 KB) - added by iseulde 4 years ago.
30619.5.patch (27.2 KB) - added by iseulde 4 years ago.
30619.6.patch (2.7 KB) - added by iseulde 4 years ago.
30619.7.patch (688 bytes) - added by iseulde 4 years ago.

Download all attachments as: .zip

Change History (30)

#1 follow-up: @azaozz
5 years ago

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?

@azaozz
5 years ago

#2 @azaozz
5 years ago

  • Focuses accessibility added
  • Keywords has-patch added

#3 in reply to: ↑ 1 @afercia
5 years ago

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.

#4 follow-up: @DrewAPicture
5 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from Future Release to 4.2
  • Priority changed from normal to high

Patch still applies.

@afercia: Care to follow up here?

#5 in reply to: ↑ 4 @afercia
5 years ago

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.

#6 @DrewAPicture
5 years ago

  • Keywords dev-feedback added
  • Owner set to azaozz
  • Status changed from new to reviewing

@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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

#8 @azaozz
5 years ago

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.

This ticket was mentioned in Slack in #core by iseulde. View the logs.


4 years ago

This ticket was mentioned in Slack in #core by drew. View the logs.


4 years ago

#11 @iseulde
4 years ago

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

#12 @DrewAPicture
4 years ago

  • Owner changed from azaozz to DrewAPicture
  • Status changed from reviewing to accepted

#13 @DrewAPicture
4 years ago

  • Owner changed from DrewAPicture to iseulde
  • Status changed from accepted to assigned

@iseulde
4 years ago

#14 @iseulde
4 years ago

  • Focuses javascript added
  • Keywords has-patch added; needs-patch dev-feedback removed
  • Version set to 3.9

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

#15 @iseulde
4 years ago

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.

@iseulde
4 years ago

@iseulde
4 years ago

@iseulde
4 years ago

#16 @azaozz
4 years ago

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.

#17 @azaozz
4 years ago

In 31727:

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

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


4 years ago

@iseulde
4 years ago

#19 @azaozz
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 31732:

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

#20 @iseulde
4 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

@iseulde
4 years ago

#21 @iseulde
4 years ago

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.

#22 @DrewAPicture
4 years ago

  • Priority changed from high to normal

#23 @azaozz
4 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 31972:

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

Note: See TracTickets for help on using tickets.