Site editor: frame resizing is not keyboard accessible

[afercia]

Description

In the Site Editor, the new 'Frame resizing' introduced in #49910 is not operable with the keyboard.

I do realize the new resizing functionality works pretty differently from the previous implementation. Anyways, the previous resizing feature used the ResizeHandle and, while not perfect, it was operable with the keyboard. The new functionality is not.

As a keyboard user, I can't resize the editor iframe.

I would like to kindly remind everyone that any feature must be operable with the keyboard. Or, there must be an alternative way to use a feature that is keyboard accessible. I couldn't find any way to resize the iframe by using the keyboard so I'd call this an accessibility regression.

Quickly scanning the related PR #49910 I couldn't see any consideration about accessibility and keyboard interaction, which is a bit disheartening to be honest.

Additionally:

• The "Drag to resize" string is not translatable.
• That string is used to render a HTML title attribute on the draggable div element. For a number of years, WordPress has been progressively removing title attributes from the UI because they serve litle purpose and are accessible to only a minority of users. See https://core.trac.wordpress.org/query?keywords=~title-attribute
  We should never introduce new title attributes and use Tooltips instead.

Step-by-step reproduction instructions

• Go to the Site Editor.
• Stay in the initial view, with the Navigation panel on the left and the editor canvas on the right.
• Hover between the panel and the canvas.
• Observe a 'drag handle' appears. While hovering, a title attribute shows up, with the text 'Drag to resize'.
• Use the keyboard and try to na igate to the drag handle.
• Observe the drag handle doesn't appear (it's not focusable anyways).
• Try to find an alternative way to resize the iframe by using only the keyboard.
• Observe there is no way to resize the iframe with the keyboard.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[annezazu]

Thanks for opening this and reporting! This used to work #47176 but I know some aspects were recently iterated upon: #49910 cc @youknowriad and @SaxonF

[joedolson]

Is there anything this needs to move forward? This is a pretty major keyboard regression, and it doesn't seem like there's a lot of movement on it right now.

[annezazu]

Right now, the best bet is that it's in the 6.3 board as to do already. Riad already commented on the initial PR here linking this issue: #49910 (comment) @SaxonF pinging you again just in case.

[ramonjd]

I had a spare few moments, and tried to wrangle the Resize Handler into the ResizableFrame without much success.

Keyboard navigation sort of works, but the width calculations are extensive and probably need to be ported over to any keyboard events. Maybe folks who worked on it would have better and faster success than I.

[youknowriad]

@ramonjd Can't we just restore what we had before that PR? https://github.com/WordPress/gutenberg/pull/49910/files

[ramonjd]

Yeah, looks like we could roll back packages/edit-site/src/components/layout/index.js. useIsSiteEditorLoading() will still come in handy I suppose.

A lot of code/effort went into #49910 so I was hoping someone with more knowledge of the changes, e.g., @mirka, might have an idea to patch it before we do that.

[ramonjd]

Can't we just restore what we had before that PR?

I've taken a stab here:

• Site editor: revert layout.js changes from Update frame resizing #52311

There's a lot going on /layout/index.js so I tried to revert and merge as best as I could with eyeballs.

[mirka]

Apologies for missing this on the first pass! My bad. I think I figured out a way to add back keyboard operability, so I will propose a patch shortly.

[ramonjd]

Thanks @mirka, I'll close my revert PR. 🙇🏻