React-Bootstrap Modal focus trapping with multiple active portals
0 reputation · 25 Jun 2020, 14:18 UTC
Modal Focus Management
The React-Bootstrap Modal component utilizes React Portals to render content outside the main DOM hierarchy, ensuring that z-index layering remains consistent. To maintain accessibility, the component implements focus trapping to prevent keyboard navigation from escaping the modal boundaries while the window is active.
In environments where multiple portals are rendered simultaneously—such as a nested modal or a modal appearing alongside other portal-based overlays—the focus management logic may encounter conflicts regarding which element retains priority for the Tab key sequence.
Assuming the use of React 17 and a compatible version of React-Bootstrap, how does the focus trap behave when a second Modal is triggered while a primary Modal is still open? Is there a documented configuration to explicitly define the focus priority between overlapping portals?