Fix auto focus in accordion block by byteninjaa0 · Pull Request #72021 · WordPress/gutenberg

byteninjaa0 · 2025-10-02T05:18:15Z

What?

Closes #71933

Fix: Add auto-focus to accordion heading on block selection

Why?

Automatically focus the accordion heading title field when the block
is selected, making it consistent with other Gutenberg blocks like
paragraphs and headings. This allows users to start typing immediately
after inserting an accordion block without requiring a manual click.

How?

The implementation uses useRef to reference the RichText component and
useEffect to focus it when isSelected becomes true. A setTimeout with
cleanup ensures the DOM is ready before focusing and prevents memory
leaks.The implementation uses useRef to reference the RichText component and
useEffect to focus it when isSelected becomes true. A setTimeout with
cleanup ensures the DOM is ready before focusing and prevents memory
leaks.

Testing Instructions

Testing Instructions for Keyboard

Open the WordPress block editor (create a new post or page)
Click the block inserter button (+) or press / to search for blocks
Search for "Accordion" and select it
The cursor should immediately appear in the accordion heading title field

Screenshots or screencast

before

beforee.mp4

after

afterrr.mp4

Before	After

github-actions · 2025-10-02T05:18:23Z

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: byteninjaa0 <byteninjaa0@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>

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

github-actions · 2025-10-02T05:18:53Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @byteninjaa0! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

mikachan

Thanks for working on this! It's testing well for me 🙌

I've left some inline comments with some possible improvements, let me know what you think.

mikachan · 2025-10-02T10:50:39Z

packages/block-library/src/accordion-heading/edit.js

+	const titleRef = useRef();
+
 	// Set icon attributes.
+


I don't think we need this extra line here.

Suggested change

packages/block-library/src/accordion-heading/edit.js

t-hamano · 2025-10-02T13:10:23Z

Thanks for the PR! I understand the approach using the isSelected prop and effect, but I think that approach alone may not be sufficient.

After inserting the Accordion block, select it and press the "Add" button. The title field should no longer be focused:

7cbd6a7d394478b3342125eea843e019.mp4

I haven't been able to look into it enough yet, but it might be worth looking a bit more into why the problem occurs rather than simply fixing the symptoms.

t-hamano · 2025-10-02T13:36:16Z

@mikachan I was able to fix this problem by applying the following changes to trunk branch, but what do you think?

git diff
diff --git a/packages/block-library/src/accordion-heading/edit.js b/packages/block-library/src/accordion-heading/edit.js
index 8818e9cc4f..ceddfb4ae7 100644
--- a/packages/block-library/src/accordion-heading/edit.js
+++ b/packages/block-library/src/accordion-heading/edit.js
@@ -33,7 +33,7 @@ export default function Edit( { attributes, setAttributes, context } ) {
 
        return (
                <TagName { ...blockProps }>
-                       <button
+                       <div
                                className="wp-block-accordion-heading__toggle"
                                style={ spacingProps.style }
                        >
@@ -64,7 +64,7 @@ export default function Edit( { attributes, setAttributes, context } ) {
                                                +
                                        </span>
                                ) }
-                       </button>
+                       </div>
                </TagName>
        );
 }
diff --git a/packages/block-library/src/accordion/edit.js b/packages/block-library/src/accordion/edit.js
index f628c93e9b..43fdae369e 100644
--- a/packages/block-library/src/accordion/edit.js
+++ b/packages/block-library/src/accordion/edit.js
@@ -56,7 +56,7 @@ export default function Edit( {
        const isContentOnlyMode = blockEditingMode === 'contentOnly';
 
        const innerBlocksProps = useInnerBlocksProps( blockProps, {
-               template: [ [ ACCORDION_BLOCK_NAME ], [ ACCORDION_BLOCK_NAME ] ],
+               template: [ [ ACCORDION_BLOCK_NAME ] ],
                defaultBlock: ACCORDION_BLOCK,
                directInsert: true,
                templateInsertUpdatesSelection: true,

Update the Accordion block template to have only one Accordion Item. Focus propagation may not be working properly due to multiple Accordion Items being inserted at the same time.
Change the button element to a div element. This may be related to the fact that the button element is a focusable element.

In my tests, it works fine in most cases, except when I press the Add button, the RichText doesn't get focus.

260a98f5d649a55460d1bb1a7bcf41ca.mp4

byteninjaa0 · 2025-10-03T05:28:49Z

@t-hamano yes it works for me too but don't you think changing the button tag to div will cause regressions?

mikachan · 2025-10-03T08:30:35Z

Change the button element to a div element. This may be related to the fact that the button element is a focusable element.

We used a button in the heading element so we could follow these examples as closely as possible: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ and https://designsystem.digital.gov/components/accordion/. I believe the button helps describe the open/close action of the accordions. I'm not suggesting that we can't change the markup, but we should be careful not to reduce the accessibility.

t-hamano · 2025-10-03T09:21:26Z

How about adding tabIndex="-1" to the button element? I suspect the underlying issue is that the RichText component is wrapped in a focusable and tabbable button element.

mikachan · 2025-10-03T09:45:13Z

How about adding tabIndex="-1" to the button element?

Good idea! I've just tried this out, and it works nicely when combined with reducing the number of accordions to one. I think this is a better solution as it's simpler and addresses the underlying issue.

diff --git a/packages/block-library/src/accordion-header/edit.js b/packages/block-library/src/accordion-header/edit.js
index fbd5a4e3005..682fb79c898 100644
--- a/packages/block-library/src/accordion-header/edit.js
+++ b/packages/block-library/src/accordion-header/edit.js
@@ -52,6 +52,7 @@ export default function Edit( { attributes, setAttributes, context } ) {
                                        style={ {
                                                ...spacingProps.style,
                                        } }
+                                       tabIndex="-1"
                                >
                                        { showIcon && iconPosition === 'left' && (
                                                <span
diff --git a/packages/block-library/src/accordion/edit.js b/packages/block-library/src/accordion/edit.js
index 7ed2693067f..52eced629b6 100644
--- a/packages/block-library/src/accordion/edit.js
+++ b/packages/block-library/src/accordion/edit.js
@@ -41,7 +41,7 @@ export default function Edit( {
        const { insertBlock } = useDispatch( blockEditorStore );

        const innerBlocksProps = useInnerBlocksProps( blockProps, {
-               template: [ [ ACCORDION_BLOCK_NAME ], [ ACCORDION_BLOCK_NAME ] ],
+               template: [ [ ACCORDION_BLOCK_NAME ] ],
                defaultBlock: ACCORDION_BLOCK,
:

t-hamano · 2025-10-03T09:47:48Z

@byteninjaa0, could you try this approach? #72021 (comment)

byteninjaa0 · 2025-10-03T09:48:43Z

Yes sure

byteninjaa0 · 2025-10-03T16:40:44Z

it works for me too

2025-10-03.22-07-43.mp4

byteninjaa0 · 2025-10-03T17:11:05Z

@t-hamano should i send a commit with the changes?

t-hamano · 2025-10-03T17:12:39Z

@byteninjaa0 Yes 👍

Co-authored-by: byteninjaa0 <byteninjaa0@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>

packages/block-library/src/accordion-heading/edit.js

Co-authored-by: byteninjaa0 <byteninjaa0@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>

t-hamano

LGTM 👍

t-hamano · 2025-10-04T14:39:43Z

I believe the failing E2e test is not related to this PR. See #71630 (comment)

byteninjaa0 added 2 commits October 2, 2025 09:11

fixed auto focus in accordian block

a5af0ed

added comment

bda35c2

byteninjaa0 requested review from ajitbohra and fabiankaegy as code owners October 2, 2025 05:18

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 2, 2025

shail-mehta added [Type] Bug An existing feature does not function as intended [Block] Accordion Affects the Accordion Block labels Oct 2, 2025

shail-mehta assigned byteninjaa0 Oct 2, 2025

mikachan requested review from mikachan and t-hamano October 2, 2025 11:28

mikachan reviewed Oct 2, 2025

View reviewed changes

t-hamano changed the title ~~Fix auto focus in accordian block~~ Fix auto focus in accordion block Oct 3, 2025

byteninjaa0 and others added 2 commits October 3, 2025 23:55

Merge branch 'WordPress:trunk' into fix-auto-focus-in-accordian-block

0fe7b19

issue solved by making the tabIndex to -1.

4c1f2ab

Co-authored-by: byteninjaa0 <byteninjaa0@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>

t-hamano approved these changes Oct 4, 2025

View reviewed changes

packages/block-library/src/accordion-heading/edit.js Outdated Show resolved Hide resolved

packages/block-library/src/accordion-heading/edit.js Outdated Show resolved Hide resolved

Remove previous implementation as no longer needed

cacf637

Co-authored-by: byteninjaa0 <byteninjaa0@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>

t-hamano approved these changes Oct 4, 2025

View reviewed changes

t-hamano merged commit fdec4a0 into WordPress:trunk Oct 4, 2025
85 of 88 checks passed

github-actions bot added this to the Gutenberg 21.9 milestone Oct 4, 2025

Conversation

byteninjaa0 commented Oct 2, 2025

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Uh oh!

github-actions bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 2, 2025

Uh oh!

mikachan left a comment

Choose a reason for hiding this comment

Uh oh!

mikachan Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

t-hamano commented Oct 2, 2025

Uh oh!

t-hamano commented Oct 2, 2025

Uh oh!

byteninjaa0 commented Oct 3, 2025

Uh oh!

mikachan commented Oct 3, 2025

Uh oh!

t-hamano commented Oct 3, 2025

Uh oh!

mikachan commented Oct 3, 2025

Uh oh!

t-hamano commented Oct 3, 2025

Uh oh!

byteninjaa0 commented Oct 3, 2025

Uh oh!

byteninjaa0 commented Oct 3, 2025

Uh oh!

byteninjaa0 commented Oct 3, 2025

Uh oh!

t-hamano commented Oct 3, 2025

Uh oh!

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Oct 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Oct 2, 2025 •

edited

Loading