Block Editor: Add Enter key navigation from Accordion Heading to Panel

[sidharthpandita1]

What?

Closes #72576

Adds Enter key navigation from Accordion Heading to Accordion Panel content, enabling a seamless keyboard editing workflow similar to Post Title → first paragraph navigation.

Why?

Currently, when editing an Accordion block, users must perform multiple keyboard interactions (Tab, arrow keys, or mouse clicks) to navigate from the Accordion Heading to the Panel content. This creates friction in the editing workflow and is inconsistent with other block navigation patterns in the editor.

This enhancement improves:

• Keyboard-only editing workflow - Reduces steps needed to create accordion content
• Accessibility - Makes accordion editing more efficient for keyboard users and screen reader users
• Consistency - Aligns with existing Post Title navigation pattern
• User experience - Faster content creation for FAQs, documentation, and collapsible sections

How?

The implementation adds keyboard navigation logic to the Accordion Heading block:

1. Added clientId to usesContext in block.json to enable block hierarchy traversal
2. Implemented onKeyDown handler that detects Enter key press (excluding Shift+Enter)
3. Used useSelect hook to find the parent accordion-item and child accordion-panel blocks
4. Navigation logic:
   • If Panel contains blocks → focus the first block
   • If Panel is empty → insert a new Paragraph block and focus it
5. Imported necessary dependencies:
   • useSelect, useDispatch from @wordpress/data
   • createBlock from @wordpress/blocks
   • ENTER from @wordpress/keycodes

Testing Instructions

1. Open a post or page in the editor
2. Insert an Accordion block (/accordion)
3. Click on the Accordion Heading to edit it
4. Type some text (e.g., "What is WordPress?")
5. Press Enter
6. ✅ Expected: Cursor should automatically move to the Accordion Panel content area
7. Start typing - you should be editing inside the panel
8. Click back on the heading, press Enter again
9. ✅ Expected: Focus should move to the first block in the panel

Test with Empty Panel

1. Insert a new Accordion block
2. Click on the heading and type text
3. Press Enter
4. ✅ Expected: A new paragraph block should be created in the panel and focused automatically

Test with Multiple Blocks in Panel

1. Create an accordion with multiple blocks in the panel (paragraph, list, image, etc.)
2. Click on the heading and press Enter
3. ✅ Expected: First block in the panel should be focused (not the second or third)

Testing Instructions for Keyboard

This feature is specifically designed for keyboard navigation. Test the complete workflow using only keyboard:

1. Use Tab to navigate to the Accordion block
2. Press Enter or Space to select it
3. Type text in the heading (should focus automatically)
4. Press Enter key
5. ✅ Expected: Focus moves to panel without using Tab or mouse
6. Type content in the panel
7. Press Escape to deselect
8. Use arrow keys to navigate back to heading
9. Press Enter again
10. ✅ Expected: Focus returns to the first panel block

Additional Keyboard Tests

• Shift+Enter in heading → Should do nothing (line breaks are disabled)
• Tab from heading → Should follow normal tab order (not affected by this PR)
• Nested accordions → Enter should navigate to the correct panel (the one directly associated with the heading)

Screenshots or screencast

505753858-21325d47-e1e0-48b4-b9dd-286db925913e.mov

Workflow Demonstration

Before: User must manually Tab multiple times or use mouse to navigate from heading to panel content.

After: User simply presses Enter to navigate from heading to panel, creating a fluid editing experience.

Before	After
Multiple keyboard interactions required: 1. Type in heading 2. Press Tab (multiple times) 3. Navigate to panel 4. Start typing	Single keyboard interaction: 1. Type in heading 2. Press Enter 3. Immediately start typing in panel

---

Technical Notes

• Uses onKeyDown handler instead of onSplit because disableLineBreaks on the RichText component prevents split events
• Maintains all existing accordion functionality and styling
• No breaking changes - purely additive enhancement
• Follows existing Gutenberg navigation patterns (similar to Post Title implementation)
• Minimal performance impact - useSelect is properly memoized

Accessibility Improvements

✅ Keyboard-only users can now edit accordions more efficiently
✅ Reduces cognitive load by providing predictable navigation
✅ Screen readers naturally announce focus changes
✅ No new accessibility barriers introduced
✅ Maintains proper focus management throughout

---

Related: This enhancement was discussed in issue #72576 and aligns with the goal of improving keyboard navigation consistency across all Gutenberg blocks.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin, New Block, [Type] Iteration.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin, New Block, [Type] Iteration.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sidharthpandita1 <sidharthpandita@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.