Font Library: Fix focus issue when navigating#78671
Open
juanfra wants to merge 1 commit into
Open
Conversation
juanfra
added
[Type] Enhancement
|
Size Change: +26 B (0%) Total Size: 8.18 MB 📦 View Changed
ℹ️ View Unchanged
|
|
Flaky tests detected in eac0f6c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26444273074
|
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
1 participant
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.
What?
Fix focus issue when you go back from a font detail view to the font list. When that happens, the focus jumps to the first item in the list instead of the font you just came from.
Why?
The navigator component has focus-return logic built in, but it breaks here because the font list is fully unmounted while the detail screen is shown. When you go back, the original DOM reference is stale and it falls back to the first focusable element.
This affects keyboard and screen reader users who expect focus to stay where they left off.
How?
Before clearing the selection on Back, the font slug is saved to a ref. Once the list remounts, it queries for the matching button via data-font-slug and focuses it.
Testing Instructions
Screenshots or screencast
font-library-focus.mp4