Background image support: Fix focus loss when resetting background image #55984
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
andrewserong
added
[Type] Bug
|
Size Change: +36 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
ramonjd
approved these changes
Nov 9, 2023
| @@ -271,7 +277,17 @@ function BackgroundImagePanelItem( props ) { | |||
| > | |||
| { hasValue && ( | |||
| <MenuItem | |||
| onClick={ () => resetBackgroundImage( props ) } | |||
| onClick={ () => { | |||
| const [ toggleButton ] = focus.tabbable.find( | |||
| // Focus the toggle button and close the dropdown menu. | ||
| // This ensures similar behaviour as to selecting an image, where the dropdown is | ||
| // closed and focus is redirected to the dropdown toggle button. | ||
| toggleButton?.focus(); |
There was a problem hiding this comment.
I asked ChatGPT if there were any accessibility concerns when programmatically triggering the HTMLElement click() method:
- Ensure that the programmatically triggered click is consistent with keyboard navigation.
- Make sure that the element receiving the click event also receives focus
- ARIA Roles and States: Ensure that the HTML elements have appropriate ARIA roles and states if necessary. (the
aria-expandedhas the right value)
😄
Mamaduka
approved these changes
Nov 9, 2023
There was a problem hiding this comment.
Thank you, @andrewserong!
I totally missed the focus loss issue 🙇
|
Thanks, folks! 🙂 |
andrewserong
deleted the
try/update-focus-when-resetting-background-image
branch
mikachan
pushed a commit
that referenced
this pull request
Nov 9, 2023
|
I just cherry-picked this PR to the 6.4-next-point-release branch to get it included in the next release: 223efb0 |
mikachan
removed
the
Backport to WP Minor Release
mikachan
pushed a commit
that referenced
this pull request
Nov 13, 2023
cbravobernal
pushed a commit
that referenced
this pull request
Nov 14, 2023
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?
Fix focus loss when resetting a background image in the background image block support (e.g. in a Group block) when resetting via the main dropdown.
Why?
This is most noticeable when navigating via keyboard, but the fix in #55973 that hides the Reset button results in a focus loss when you click the Reset button as the reset button is then no longer rendered once the background image value is cleared. The proposed fix is to deliberately place focus on the toggle button to avoid the focus loss.
How?
Testing Instructions
Testing Instructions for Keyboard
As above, but tab over to the background image toggle and press enter to open the dropdown. After you've added an image, when you hit enter on the Reset option to clear out the value, the dropdown should be closed, and focus should be directed to the toggle button. You should be able to hit enter again to open the dropdown.
Screenshots or screencast
Before
Resetting results in a focus loss with the dropdown still open:
2023-11-09.10.20.53.mp4
After
Resetting closes the dropdown and shifts focus to the toggle button:
2023-11-09.12.28.54.mp4