gutenberg
gutenberg copied to clipboard
WordPress
Nav offcanvas - retain key block options but make disabled with appropriate description
As reported in https://github.com/WordPress/gutenberg/issues/46939#issuecomment-1376732975 by @talldan:
there are some missing options for some blocks (Page List children don't have an "Edit block" button), screen reader users may wonder why this is.
It also makes the grid style keyboard navigation confusing, if I press the up arrow from from the block settings of the first page list item, I land on the edit button for the parent page list block, which means I didn't traverse the structure as a grid.
I think it'd be better to show an aria-disabled version of the "edit block" button with an appropriate description. Possibly also consider this for other relevant options.
This is partly caused by this PR: https://github.com/WordPress/gutenberg/pull/47061, which we will revert.
There are also issues within the List View component which make this more complex. We don't output the additional cells when showBlockActions is false. We should review this in the List View and ensure that those cells are always output for the benefit of keyboard users.
I've been playing with this and I'm not sure having the empty cells with a hidden text would be beneficial. This is what I've found so far:
The list view makes use of colspan to expand when some of the columns are not present, namely the "actions" column and the "movers". The movers are apparently not being used by the blocks, and I'm lacking context here for if that will be active or not. The actions are what we call the 3 dot menu, which is not present on blocks that are hiding the toolbar.
The nav block on the sidebar inspector adds an extra edit button for some of the blocks, but not all.
Do we know of a case like this, where we display a message for keyboard users when an action is not present? I'm hesitant to implement such a thing only for the case of the edit button. I was trying to find what the consensus is around using colspan in terms of a11y and it seems like the general rule is to use it sparingly. This case's not too obvious to me. Adding the empty table cells in all of these is going to break the styles quite a bit too.
This will become irrelevant if https://github.com/WordPress/gutenberg/pull/47608 lands which removes the dedicated edit button.
With https://github.com/WordPress/gutenberg/pull/47608 there is no "edit" button so this is no longer relevant.