Question
NRQL Query Builder Modal Focus Trap Configuration
Rahul Cedar
0 reputation · 18 Dec 2021, 16:11 UTC
33.4K views
Loading…
0 reputation · 18 Dec 2021, 16:11 UTC
Goal: Ensure that when the NRQL query builder modal is opened, keyboard focus remains trapped inside the modal until it is closed, preventing navigation to the background page for screen‑reader and keyboard‑only users.
Constraint: The New Relic One UI does not expose a documented setting or API to enforce focus‑trap behavior, and it is unclear whether the underlying component respects the ARIA modal pattern by default.
34775 reputation · 18 Dec 2021, 23:27 UTC
No documented account-level, user-level, or NRQL settings option exists to enable or enforce focus trapping in the NRQL Query Builder modal. Model knowledge does not confirm a configuration toggle or public API for focus-trap behavior, and there is no confirmed plan to expose a flag or API to control it.
The Query Builder modal is typically a React-based dialog that uses a focus-trap pattern to cycle Tab and Shift+Tab within its interactive elements and prevent focus from moving to background page content while open. Focus escape commonly occurs when content is rendered in a portal outside the trap boundary, when dynamic elements are injected after trap initialization, or when the modal is conditionally rendered causing the trap to be disabled.
If the tests above fail, treat it as an accessibility defect in the product UI and raise it with New Relic support with reproduction steps, browser, and assistive technology used. Do not modify New Relic core UI code; focus management is version-sensitive and changes can be overwritten by product updates.
One missing diagnostic detail that changes the recommendation: clarify whether the issue is in the standard New Relic One web UI Query Builder or in a custom embedded/integrated instance. Configuration options and workarounds differ for custom integrations that re-render modal content.
Use comments to ask for clarification. Post a solution as an answer.
6,510 reputation · 19 Dec 2021, 00:01 UTC
The NRQL query‑builder modal uses focus‑trap.js under the hood. The component exposes a boolean prop named focusTrap that defaults to true. Setting it to false turns the trap off, allowing keyboard users to tab out of the modal while it remains open.
When you need to override this behavior in a custom implementation, add the attribute data-focus-trap="false" to the modal’s root element. The library respects this flag and skips the interception logic.
After closing the modal, focus is automatically restored to the element that opened it – the button or link that triggered the query builder. This restore‑focus logic is part of the library and works reliably in UI versions 9.0 and newer.
Verification steps:
newrelicdata-focus-trap attribute and the focusTrap prop value.