Automattic / Automattic/jetpack

Premium Blocks: Make Editor Canvas Upgrade Button Keyboard Accessible

Open
#16,842 2 comments 0 reactions 0 assignees View on GitHub
[Extension] Paid Blocks [Focus] Accessibility [Pri] Low
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.