Deleting list items inside the Block Navigation

[paaljoachim]

In regards to this PR: #10545

What about being able to delete list items in the Block Navigation?

[jwold]

Thinking this through. Are you suggesting something like this?

I think that could work, but worry it might be a bit busy in that small area.

Note, I just opened a separate issue suggesting that the block navigation could be broken out into a sidebar.

[paaljoachim]

I think that would be too much. As the main point of the block navigation is to get an overview of the various blocks in the layout.

It would be best I believe to be able to drag the items around and then in the order one wants them in. That could mean that the trash icon could appear at the top right when one begins to drag a block.

[jwold]

@paaljoachim that feels a bit like the Instagram stories layout, where you drag things into a trash icon. It's simpler and would work well. So having just one trash can makes sense.

From an accessibility standpoint would I still be able to make the same action work from a keyboard?

[paaljoachim]

This is what I think. I believe one could press tab to enter into the block navigation and then press tab to go through each block. Click enter on selected block then click the delete key. @afercia
Andrea can probably give some thoughts on this.

[afercia]

Click enter on selected block then click the delete key.

Multiple actions on a single UI controls are (maybe) a pattern best suited for mobile applications. On the Web, good semantics is key. An Ui control should have only one, clear, available action. From an accessibility perspective, I'm not opposed to explore extending the functionalities available in the Block Navigation menu, but I'd strongly recommend a separate control (another button) to delete a block. Also, when deleting an item, focus must be managed programmatically, as the previously focused element gets removed and focus must land in the most logical place.

I'd tend to agree with @jwold if this menu is going to incorporate additional features then maybe a dropdown is not the best UI: there's the need of more space. The reordering functionality would need this menu to be "sticky" otherwise it will close each time a single item gets reordered. Also, only drag-and-drop is not enough: reordering must work with keyboard too so there's the need of additional controls (buttons). Overall, the UI will have several additional controls and there's the risk it becomes a bit cluttered. Not sure if this is desirable from a design perspective.

That said, the Block Navigation menu needs some improvements first and I'd recommend to wait it becomes a bit more stable before introducing new features. For example, I'm not sure why buttons are used to navigate to in-page content. Instead of buttons, this menu should use anchors with an URL fragment identifier that points to in-page content, as already proposed for the Document outline, see #10815

One more important change that needs to be implemented is about nested blocks: right now, there's no semantic information to communicate the nesting level of the blocks:

The indentation is only visual: screen readers reading this list won't find any information about the nesting level.

[jwold]

@afercia thanks for jumping in with this thoughtful response. Sounds like this issue needs a bit more thought and exploration.

[afercia]

Created #11713 for the missing semantics.

[paaljoachim]

The issue is old and a lot of changes have happened to the List View/Block Navigation, so that I am closing this issue.