Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Blocks: Alt+F10 should navigate to block toolbar regardless of visibility #10907

Closed
aduth opened this issue Oct 22, 2018 · 2 comments
Closed

Blocks: Alt+F10 should navigate to block toolbar regardless of visibility #10907

aduth opened this issue Oct 22, 2018 · 2 comments
Assignees
@jorgefilipecosta
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Priority] High Used to indicate top priority items that need quick attention [Type] Task Issues or PRs that have been broken down into an individual action to take
Milestone
WordPress 5.0 RC

Comments

@aduth
Copy link
Member

aduth commented Oct 22, 2018

Currently, Alt+F10 only works to navigate to the block toolbar if it is visible. When not using the Unified Toolbar setting, the toolbar is made invisible while a user is typing. Thus, the user must take steps to reactivate the block toolbar before being able to press Alt+F10.

Steps to reproduce:

  1. (Prerequisite) If not already, disable Unified Toolbar
  2. Insert paragraph block
  3. Press some characters to activate "typing mode", thus making toolbar invisible
  4. Press Alt+F10

Expected: Focus is shifted into block toolbar
Actual: Focus is shifted to header toolbar

Task:

Alt+F10 should shift focus into the block toolbar, regardless of visibility.

Technical notes:

Note that there are multiple toolbars which are meant to respond to the keyboard shortcut. See #10699.

The tricky point is in interoperating with React lifecycle to move focus to a yet-unrendered element. See #10699 (comment) .
@aduth aduth added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Task Issues or PRs that have been broken down into an individual action to take labels Oct 22, 2018
@aduth
Copy link
Member Author

aduth commented Oct 22, 2018

Related:

@aduth aduth mentioned this issue Oct 22, 2018
Merged
@mtias mtias added this to the WordPress 5.0 milestone Oct 23, 2018
@talldan
Copy link
Contributor

talldan commented Oct 26, 2018 •
edited
Loading

This shortcut was also missing from our docs, so I've made a PR (#11096) to add it. Not sure if it's worth holding off on merging that till the functionality works as desired.

@talldan talldan mentioned this issue Oct 26, 2018
Merged
4 tasks
@mtias mtias added the [Priority] High Used to indicate top priority items that need quick attention label Nov 4, 2018
@jorgefilipecosta jorgefilipecosta self-assigned this Nov 7, 2018
@jorgefilipecosta jorgefilipecosta mentioned this issue Nov 7, 2018
Merged
jorgefilipecosta added a commit that referenced this issue Nov 9, 2018
@jorgefilipecosta
Fix: Blocks: Alt+F10 should navigate to block toolbar regardless of v…
a2fee33 
…isibility (#11607)

## Description
Closes: #10907
When pressing alt + f10 if the contextual toolbar was not visible because the user was typing, we did not focus the block contextual toolbar, and we focused the header instead.

This PR addresses this problem.
To solve the problem, the PR performs the following actions:
Adds a prop to NavigableToolbar that enables it to focus when mounting.
Adds an event handler for pressing alt+f10 key combination on BlockListBlock and state flag the indicates that the handling is in progress.

## How has this been tested?
I checked the unified toolbar mode was not enabled.
I added a paragraph, I wrote something until the toolbar disappears I pressed alt+f10, and I verified the block toolbar appeared with the first item focused.
I repeated the test with other blocks, e.g., writing on the image caption.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jorgefilipecosta jorgefilipecosta

Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Priority] High Used to indicate top priority items that need quick attention [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Milestone
WordPress 5.0 RC
Development

No branches or pull requests
4 participants
@mtias @talldan @aduth @jorgefilipecosta