Accordion Block: Add additional keypress handlers for navigation#71786
Merged
Accordion Block: Add additional keypress handlers for navigation#71786
Conversation
t-hamano
added
[Type] Enhancement
|
Size Change: +231 B (+0.01%) Total Size: 1.95 MB
ℹ️ View Unchanged
|
t-hamano
commented
Sep 20, 2025
|
|
||
| if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion' ) ) ) { | ||
| $p->set_attribute( 'data-wp-interactive', 'core/accordion' ); | ||
| $p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen": [], "icon": "' . $icon . '", "iconPosition": "' . $icon_position . '" }' ); |
Contributor
Author
There was a problem hiding this comment.
I removed the icon and iconPosition context as there are not used anymore.
| accordionContent.isOpen = ! accordionContent.isOpen; | ||
| } | ||
| }, | ||
| handleKeyDown: withSyncEvent( ( event ) => { |
Contributor
Author
There was a problem hiding this comment.
Unfortunately, the withSyncEvent wrapper doesn't seem to work as expected. If you press arrowUp/ArrowDown/Home/End key on the toggle button, the browser console logs the following warning:
I believe this problem is the same as #69975, and should be fixed in #70325.
cc @felixarntz
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
joedolson
approved these changes
Sep 20, 2025
Contributor
joedolson
left a comment
joedolson
left a comment
There was a problem hiding this comment.
Tested with NVDA/Firefox, VoiceOver/Chrome and JAWS/Chrome, and with keyboard only.
With screen readers running, the home/end keys operated normally for the screen reader, navigating to the beginning and end of the current line. That's good; we don't want to override screen reader behavior with these shortcuts.
On the keyboard, focused moved as expected on arrow & home/end.
Contributor
Author
|
@joedolson Thanks for the review!
I would like to merge this PR because this issue is not new to this PR and should be fixed separately. |
adamsilverstein
pushed a commit
to adamsilverstein/gutenberg
that referenced
this pull request
Sep 22, 2025
…dPress#71786) Co-authored-by: t-hamano <[email protected]> Co-authored-by: joedolson <[email protected]>
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
2 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.
Closes #71778
What?
This PR adds four keyboard navigation handlers to the Accordion Block.
Why?
See #71778 for more details.
How?
Each toggle button already has an ID like
accordion-content-{unique_id}applied to it. Furthermore, in the previous implementation, the isOpen state stored the ID of the currently open toggle like this:To implement the navigation function, I extended this state to store the IDs of all the toggles in the accordion and their respective open/closed states.
This gives us a list of the toggle buttons in the accordion, so we can calculate which toggle button should have focus depending on the key pressed.
Testing Instructions
Details
Testing Instructions for Keyboard
tabfocus move works as before.Screenshots or screencast
229858dce4017785fe5854c8ea64db54.mp4