Focus accordion toggle before clearing dismiss success notice by pattonwebz · Pull Request #1794 · equalizedigital/accessibility-checker

pattonwebz · 2026-06-23T21:55:37Z

Summary

Adds a useRef on the outer DismissPanel wrapper div
On notice dismiss (onRemove), focuses the PanelBody toggle button (.components-panel__body-toggle) before clearing the notice state, so focus moves to a live element before the notice's close button is unmounted
Resolves PRO-1065

Why focus first, then clear?

The notice's dismiss button is about to be removed from the DOM. If we cleared state first, React would unmount the button while it still has focus — the browser then tries to recover focus, usually landing on <body>. By focusing the toggle button first (still in the DOM), the transition is seamless and no focus loss occurs.

Test plan

Dismiss an issue in the issue modal
When the success notice appears, press Tab to reach its "Close" button and activate it (or click it)
Verify focus lands on the "Dismiss Issue" accordion toggle, not <body> or the modal backdrop
Also verify clicking the notice close button with a mouse doesn't break anything visually

🤖 Generated with Claude Code

Summary by CodeRabbit

Bug Fixes
- When dismissing success notices in the issue modal, focus is now properly managed and returned to the panel’s control for improved keyboard navigation and accessibility.

Moves focus to the PanelBody toggle button before unmounting the Notice so keyboard users are not left with lost focus when the notice is dismissed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

coderabbitai · 2026-06-23T21:56:10Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8a80c6f3-6d5a-4917-bdf8-75dd139aaa4e

📥 Commits

Reviewing files that changed from the base of the PR and between 0b1cb0f and 633a67a.

📒 Files selected for processing (1)

src/issueModal/components/DismissPanel.js

🚧 Files skipped from review as they are similar to previous changes (1)

src/issueModal/components/DismissPanel.js

📝 Walkthrough

Walkthrough

DismissPanel adds a panelRef via useRef attached to its top-level container. The success Notice component's onRemove handler is updated to query the panel body toggle element through panelRef and call .focus() on it before clearing successNotice.

Changes

Focus management in DismissPanel

Layer / File(s)	Summary
panelRef setup and onRemove focus handler `src/issueModal/components/DismissPanel.js`	`useRef` is imported and a `panelRef` is created and attached to the panel container `<div>`. The success `Notice` `onRemove` handler is updated to focus the panel body toggle element via `panelRef.current?.querySelector(...)?.focus()` before clearing `successNotice`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5 minutes

Poem

🐇 When notices vanish with a click,
The focus hops back, quick as a tick!
A panelRef guides the keyboard's way,
No lost cursor shall ruin the day.
Accessibility leads — hip hip hooray! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and accurately describes the main change: implementing focus management by shifting focus to the accordion toggle before clearing the dismiss notice state.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch william/pro-1065-focus-accordion-toggle-after-dismiss-notice-cleared

_{Comment @coderabbitai help to get the list of available commands.}

gemini-code-assist

Code Review

This pull request introduces a useRef hook in DismissPanel to reference the panel element and focus the panel's toggle button when the success notice is dismissed. The reviewer suggests making the DOM query more robust by adding a fallback to a generic button selector, as relying solely on the internal WordPress component class .components-panel__body-toggle could be brittle if class names change in future updates.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Focus accordion toggle before clearing dismiss success notice

0b1cb0f

Moves focus to the PanelBody toggle button before unmounting the Notice so keyboard users are not left with lost focus when the notice is dismissed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

gemini-code-assist Bot reviewed Jun 23, 2026

View reviewed changes

Comment thread src/issueModal/components/DismissPanel.js Outdated

Apply suggestion from @gemini-code-assist[bot]

633a67a

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

pattonwebz merged commit 7d9c53c into develop Jun 24, 2026
19 checks passed

pattonwebz deleted the william/pro-1065-focus-accordion-toggle-after-dismiss-notice-cleared branch June 24, 2026 01:11

Navigation Menu

Uh oh!

Focus accordion toggle before clearing dismiss success notice - #1794

Focus accordion toggle before clearing dismiss success notice#1794
pattonwebz merged 2 commits into
developfrom
william/pro-1065-focus-accordion-toggle-after-dismiss-notice-cleared

pattonwebz commented Jun 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

pattonwebz commented Jun 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why focus first, then clear?

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

pattonwebz commented Jun 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 23, 2026 •

edited

Loading