Automattic / Automattic/jetpack
Premium Blocks: Make Editor Canvas Upgrade Button Keyboard Accessible
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
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](https://github.com/WordPress/gutenberg/blob/af768dc98c625e33de8023084c6a5c198c52f8ef/packages/block-editor/src/components/navigable-toolbar/index.js#L97-L99). 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
Contributor guide
Research direction
Reproduce the issue with a premium block in the editor using the setup from PR 16611. Start at Gutenberg's navigable-toolbar focus handoff linked in the report and trace how the toolbar sends focus to the block. Done means keyboard focus reaches the upgrade button between the toolbar and block, while the default focus behavior remains intact and the banner is discoverable by screen readers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, wordpress
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100