Fix focus return when closing the Post publish panel#45623
Merged
Conversation
|
|
|
Size Change: +21 B (0%) Total Size: 1.29 MB
ℹ️ View Unchanged
|
Member
Author
|
For reference: previous PRs that refactored The focus loss regression is present since WordPress 5.7, Gutenberg versions 9.3-9.9. |
kevin940726
reviewed
Nov 10, 2022
| await this.page.click( 'role=button[name="Publish"i]' ); | ||
| const publishEditorPanel = this.page.locator( | ||
| 'role=region[name="Publish editor"i]' | ||
| 'role=region[name="Editor publish"i]' |
Member
There was a problem hiding this comment.
Yep, I think this is a typo 😅 . It's causing the isPublishEditorVisible check always to return false. Thanks for fixing it!
Member
Author
|
Yep, and it was a bit tricky to debug. Thanks for the review. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #45417
What?
When closing the Post publish panel, focus is supposed to be moved back to the Publish button within the top bar. This is broken since a while, probably since the refactoring of
withFocusReturnto use React hooks. The root cause is a timing issue. This PR seeks to solve it avoiding major refactoring.Why?
A focus loss is a frustrating experience for all keyboard users as they are forced to start keyboard navigation again from the document root.
How?
To my understanding:
PostPublishButtonsets focus on the Publish button within the panel. It does that oncomponentDidMount.withFocusReturn(which internally usesuseFocusReturn) checks what thedocument.activeElementis. Actually, this is now the Publish button within the panel, whileuseFocusReturnis supposed to get the element that was focused before the panel opens (the Publish button within the top bar).withFocusReturntries to set focus on the wrong button thus there's a focus loss.Basically, it appears that the
useFocusReturnhook can't work well with class components that manage focus internally withcomponentDidMount. In fact,useEffectruns aftercomponentDidMountand at that point thedocument.activeElementis not the expected one.Instead of refactoring
PostPublishButton, this PR just makes sure thatPostPublishButtonsets focus at a later time so thatwithFocusReturngets the correct button.Testing Instructions
Options > Preferences > Include pre-publish checklistpreference is enabled.Optionally:
npm run test:e2e:playwright -- --headed editor/various/publish-panel.spec.jsPostPublishButton.Screenshots or screencast