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

[tkoscieln]

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.

[coderabbitai]

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[tkoscieln]

@coderabbitai review

[coderabbitai]

✅ 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]

Preview: https://pf-react-pr-12424.surge.sh

A11y report: https://pf-react-pr-12424-a11y.surge.sh

[thatblindgeye]

Hey @tkoscieln , this looks good for resolving the issue with Poppers specifically. We have a PR in our component groups repo that is looking to introduce tearsheets, basically stacked Modals. When modals gets stackeds, they end up having the problem noted in the linked issue to your PR (all open Modals get aria-hidden of true, even the "active" one).

I was wondering if you would want to try expanding this PR to take into account additional Modals as well? Likely the logic should be that only the "active"/most recently opened Modal shouldn't have aria hidden applied, all other Modals behind the active one/that are inactive should be aria-hidden true.