ResizableEditor: Fix tab order for resize handles #57475
Merged
Conversation
This file contains 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
t-hamano
added
[Focus] Accessibility (a11y)
|
Size Change: -1 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
|
@t-hamano thank you. However, as I mentioned in #52602 (comment) I think The root problem is that, regardless of the amount of the enabled handles and their order, all the handles are rendered after the object they apply to, so that the visual order and DOM order mismatch anyways. This PR is an improvement because, at least, the left handle receives focus before the right handle. However, they both come after the resizable object so that the tab order is still unexpected. See screenshot below:
|
afercia
approved these changes
Jan 2, 2024
mirka
approved these changes
Jan 2, 2024
|
Should this change be reactive to LTR vs RTL languages? |
I also tested this PR in RTL languages. In RTL languages, when you press the tab key, the focus moves from the right handle to the left handle. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Found while searching for a solution to #52602
What?
This PR is a small improvement that fixes the order of tab focus in canvases that have resizing handles on both sides, such as Pattern editor, Template Part editor, and Style book.
In other words, when you press the Tab key, instead of focusing on the right handle and then the left handle, it focuses on the left handle and then the right handle.
Why?
The
ResizableBoxcomponent usesre-resizablecomponent internally. This component renders resize handles based on theenableprop, but the order in which each handle is rendered depends on the order of the enable prop's keys. In the object currently being passed, therightkey is before theleftkey, so the right handle is rendered before the left handle, causing confusion in the tab focus order.How?
Relying on the internal implementation of the library and the order of the keys may be a little unstable, but I changed the order of the keys.
This PR does not solve #52602 because the resize handles are rendered after the child (iframe). In the future, we may need to look for a better solution.
Testing Instructions for Keyboard
Screenshots or screencast
d6c37c9db05638a79c0e22e1f9b41195.mp4