Bring into table block new Tiny MCE table editor

[karmatosed]

This is a suggestion to solve some of our table issues by bringing the new table work done in Tiny MCE in. Now I suggest we do in stages and not that we bring every visual.

You can test it here: https://www.tinymce.com/. It's pretty awesome:

This would be a lot to bring in, so I am suggesting lets first bring in the way to choose the table. Right now adding anything beyond default columns/rows is 'interesting. Let's iterate to have:

Then we could have a second step of:

I am going to discuss the additional settings in #6923 but we should look to bring some of those in also.

I have to admit, I don't overly like the drop down we're left with, however I am not totally sure bringing in a hover 'over' the section UI works any better. We could try though as that's kind of a nice icon. That would look like:

[afercia]

Just noting the TinyMCE "grid" to insert a table is not operable with a keyboard. In fact, when using a keyboard, TinyMCE provides an alternative UI:

• from the editable area, press Alt+F9 to focus the menu bar
• use arrows or Tab to go to the "Insert" menu and press Enter to open it
• use arrows or Tab to go to the menu sub-item "Table" and press Enter

At this point, instead of the grid, the "Table properties" modal opens:

[karmatosed]

@afercia my thinking was the sidebar could be used for this. It's a little easier hopefully for people to use than a modal. What do you think?

[afercia]

@karmatosed hm, this is about the initial insertion of the table. While I could see in the sidebar some settings to edit an already existing table, it feels very unintuitive to me having to go to the sidebar to insert a table.

For keyboard users (and screen reader users) jumping to the sidebar is still very difficult, even if Gutenberg provides a couple tools to jump there.

Ideally, when inserting a table, the UI should be "in place" where the table is, and should manage focus automatically. For example, placing the focus within the first cell when a table gets added.

From a technical perspective, I'm unsure if there's a way to "hook" into what TinyMCE does and modify the table UI. Regardless, the alternative UI is just how TinyMCE works, it's built-in and it's there because the "visual grid" is just... visual. There's no semantic in that grid, and can be used only with a mouse. Also, I wonder how touch users would be able to use the grid. Does it work with touch? Are the cells within the grid big enough to be selected using fingers? I have some doubts about that.

I'm not opposed to modals, if they're built the right way.

[androb]

@afercia FWIW, we are doing a complete overhaul of the UI library in Tiny this quarter, with the release of TinyMCE v5 by September. It will improve the accessibility of the table insert grid.

The goal is to be at least as keyboard accessible as https://textbox.io/ - would be curious on your feedback for how it's table insert grid works.

[hedgefield]

This seems like a good option; if there's already a good table implementation in TinyMCE and TinyMCE is already available to summon in Gutenberg, I see no reason to roll our own. Accessibility issues aside, which sound like they will be addressed before ship. I would only advise that we keep an eye on the design patterns, that they match with what we want for Gutenberg. I see no big blockers in that right now, just a reminder to keep things consistent.

[karmatosed]

Closing to bring everything into one issue here: #6923. It's easier to manage when all table things are in one place.

[afercia]

@androb I've quickly tested (nothing more than a quick run) textbox.io. Seems to me the "table picker" is usable with a keyboard, at least to some extent. First things noticed that could benefit from some improvements:

• I don't understand when the "table picker" is "selected", there's no focus style; for example, when cycling through the header buttons and the "table picker", a visual indication that the "table picker" receives focus would be useful
• I'd consider to add a textual indication of the columns/rows numbers, as google docs does (with some better text maybe)
• when the table is inserted, Tab navigates the cells and on the last cell adds a new row; not sure this is what users would expect, as Tab is synonym of navigation
• couldn't find a way to use some commands with keyboard only: for example, to insert a row or column before or after, or split cells, or delete a row/column; these commands are in the contextual menu (accessible with a right click) but I wasn't able to find access to them with a keyboard
• same for the "Table properties" dialog

However, when using screen readers it gets way more complicated 🙂 It's very hard to use or even understand how the UI is supposed to work, at a point that I'm not sure this is the right direction to go.

Only some browser / screen reader combos seem able to announce the grid button labels (note: they use aria-labelledby referencing hidden elements). Firefox + NVDA announce the labels:

but I wasn't able to get the same feedback with other combos.

With screen readers on Windows there's generally a very inconsistent switch between browse mode and forms mode, which makes interacting with the UI very difficult.

Safari + VoiceOver announce multiple times the messages Table editing options available in toolbar / Table editing options no longer available. As far as I see the related aria-live region gets inserted and them removed from the DOM. Not sure this is the correct way to use a live region, as to my knowledge they should always be present in the DOM and only their content should change.

As said, this is far from pretending to be a complete feedback and rather just a very quick look!

[androb]

excellent feedback, thank you @afercia. I'll be sure to reach back out when we get to implementing this in Tiny 5.