search

Automattic / jetpack

Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.
https://jetpack.com/
Other
1.59k stars 798 forks source link

Premium Blocks: Make Editor Canvas Upgrade Button Keyboard Accessible #16842

Open jeryj opened 4 years ago

jeryj commented 4 years ago

https://github.com/Automattic/jetpack/pull/16611 introduced the Premium Upgrade banner and icons to different parts of the editor.

Currently, there is no way to reach the upgrade button only using the keyboard. The focus skips from the toolbar directly into the block.

This banner sits visually between the block controls and the block itself, so the ideal flow would be:

  1. TAB - block toolbar
  2. TAB - upgrade button
  3. TAB - whatever would have been focused in the block

The block toolbar and the block itself are not adjacent in the DOM, but focus is managed by programmatically sending focus from the toolbar to the block. I don't know if it's possible, but we'd need to somehow intercept/modify that sending of focus while still making sure we don't break the default functionality when it's not present. It may be a tricky one.

The Upgrade banner itself is skipped when using a screen reader to read through the screen for you, so there's no way to know that it's there.

Steps to reproduce the issue

  1. Set-up https://github.com/Automattic/jetpack/pull/16611 if it isn't merged yet
  2. Add a premium block to the editor
  3. Using your keyboard, try to access the Upgrade button on the editor canvas
mreishus commented 4 years ago

I see how useToolbarFocus creates a shortcut for Alt-F10 to focus the relevant toolbar. I don't see how/when this comes into play when using regular Tab and Shift+Tab keys. Where is that if it exists?

mreishus commented 4 years ago

This isn't really a viable solution since it changes the design, but I at least wanted to document something I found in this difficult ticket.

Wrapping <UpgradePlanBanner> in <BlockControls> and tweaking the CSS puts the banner inside the toolbar, which is already keyboard accessible. Then you can tab to the upgrade button:

2020-08-18_17-43

Not saying this is a solution, but maybe this is a springboard for ideas. I think possibly changing the dom positioning of the <UpgradePlanBanner> is one approach.