HTML block: Fix accessibility issues on back-end #54408
Merged
Conversation
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
alexstine
added
[Focus] Accessibility (a11y)
|
Size Change: +147 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 54172bc. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6237634689
|
Contributor
Author
|
I figured out the toolbar issue. Turns out the focus state is managed in writing-flow/use-tab-nav hook. When a block such as HTML changes DOM structure, simply placing focus on the element writing flow remembers last isn't going to work. This might be a good opportunity to fix this in a follow-up PR. Something like:
Might be something to think about in the toolbar improvement PR currently happening. It will likely face the same problem with blocks that change their DOM structures. Need a better way to predict focus in blocks. |
Mamaduka
reviewed
Sep 13, 2023
Comment on lines
45
to
55
| // Effect for managing focus. | ||
| useEffect( () => { | ||
| if ( ! shouldFocus ) { | ||
| return; | ||
| } | ||
| if ( isPreview ) { | ||
| blockRef?.current?.focus(); | ||
| } else { | ||
| htmlTextareaRef?.current?.focus(); | ||
| } | ||
| }, [ shouldFocus, isPreview ] ); |
Member
There was a problem hiding this comment.
Suggestion: Have you tried triggering the focus from switchToPreview and switchToHTML callbacks? Since these actions trigger DOM change, triggering the focus change also makes sense to me.
While there's nothing wrong with useEffect, direct callbacks should have preference.
P.S. I've not tested this approach.
Contributor
Author
There was a problem hiding this comment.
@Mamaduka I tried but the ref was unavailable at that stage even calling it after the state change. That's why I opted to track in state.
Member
There was a problem hiding this comment.
Right, the htmlTextareaRef won't be available when a state update is dispatched.
Contributor
Author
There was a problem hiding this comment.
@Mamaduka I think I might try to fix this in writing flow instead. If other blocks render new content, it would be better that writing flow be able to handle it where right now focus handling fails and we have to handle it secondary in blocks.
I'll split my attempt into another PR and just test. It might go somewhere, might not.
Member
There was a problem hiding this comment.
Makes sense. Ping me if I can help with review or testing.
Mamaduka
reviewed
Sep 13, 2023
alexstine
commented
Sep 13, 2023
| html={ content } | ||
| styles={ styles } | ||
| title={ __( 'Custom HTML Preview' ) } | ||
| tabIndex={ -1 } |
Contributor
Author
There was a problem hiding this comment.
Added this because focus should not enter iFrame unless user wants it to. There is no way to escape the iFrame currently since writing flow is unaware of it.
Contributor
Author
There was a problem hiding this comment.
Is there an easy fix for this? I guess not since the secondary iFrame is a different browser context.
ciampo
reviewed
Sep 14, 2023
ciampo
reviewed
Sep 19, 2023
Co-authored-by: Marco Ciampini <[email protected]>
Mamaduka
approved these changes
Sep 19, 2023
Member
Mamaduka
left a comment
Mamaduka
left a comment
There was a problem hiding this comment.
Thank you, @alexstine and @ciampo!
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.
What?
Fixes back-end accessibility of the HTML block.
Why?
My PR does not fully fix this issue but I make good progress.
#46846
How?
Testing Instructions
aria-describedbyattribute which matches the ID of the block description.Notes
Wondering why the focus return from toolbar does not work for this block. Might be worth investigating this so focus does not need to be managed in the block itself.
Testing Instructions for Keyboard
Screenshots or screencast