Skip to content

fix(Modal): exclude Poppers in aria-hidden change#12424

Open
tkoscieln wants to merge 1 commit into
patternfly:mainfrom
tkoscieln:exclude_poppers_in_modal_sibling_aria_sweep
Open

fix(Modal): exclude Poppers in aria-hidden change#12424
tkoscieln wants to merge 1 commit into
patternfly:mainfrom
tkoscieln:exclude_poppers_in_modal_sibling_aria_sweep

Conversation

@tkoscieln
Copy link
Copy Markdown

@tkoscieln tkoscieln commented May 13, 2026

What: Closes #12422

Popper based components like Select or Dropdown get mounted to the DOM on the same level as Modal. Modal then on update can set aria-hidden label to true via function toggleSiblingsFromScreenReaders, which adds the label to all the elements that are siblings of the Modal, including these components.This causes the opened Popper based component to become invisible for screen readers and/or Playwright.

Fix this by excluding all the Popper components from this function's behaviour.

Additional issues:
N/A

Summary by CodeRabbit

  • Bug Fixes
    • Fixed modal accessibility to ensure Popper-managed content such as dropdowns and tooltips within modals remain properly accessible to screen readers.

Review Change Stack

Popper based components like Select or Dropdown get mounted to the DOM
on the same level as Modal. Modal then on update can set aria-hidden
label to true via function toggleSiblingsFromScreenReaders, which adds
the label to all the elements that are siblings of the Modal, including
these components.This causes the opened Popper based component to become
invisible for screen readers and/or Playwright.

Fix this by excluding all the Popper components from this function's
behaviour.
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 13, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c944ac52-f321-487b-af0f-a4b750486468

📥 Commits

Reviewing files that changed from the base of the PR and between 41fa345 and e9289d1.

📒 Files selected for processing (1)
  • packages/react-core/src/components/Modal/Modal.tsx

Walkthrough

Modal's toggleSiblingsFromScreenReaders function now excludes Popper-managed elements (identified by data-popper-placement attribute) from aria-hidden toggling, preventing accessibility tree corruption when dropdowns and similar Popper-based components are rendered as document-body siblings during modal interactions.

Changes

Modal aria-hidden Popper exclusion

Layer / File(s) Summary
Popper element exclusion from aria-hidden toggle
packages/react-core/src/components/Modal/Modal.tsx
toggleSiblingsFromScreenReaders adds a check for data-popper-placement attribute and skips aria-hidden toggling for elements bearing this attribute, preserving accessibility state for Popper-managed dropdowns and similar siblings.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 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 PR title 'fix(Modal): exclude Poppers in aria-hidden change' directly and clearly summarizes the main change: excluding Popper components from aria-hidden toggling in the Modal component.
Linked Issues check ✅ Passed The PR addresses the core requirement from issue #12422: excluding Popper-based components from aria-hidden toggling by checking for data-popper-placement attribute.
Out of Scope Changes check ✅ Passed All changes are directly scoped to the stated objective: modifying toggleSiblingsFromScreenReaders to exclude Popper-managed elements. No unrelated changes detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@tkoscieln
Copy link
Copy Markdown
Author

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 13, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented May 13, 2026

@tkoscieln tkoscieln marked this pull request as ready for review May 13, 2026 13:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - Modal - aria-hidden=true is forced on all siblings

2 participants