[FEATURE] For components like Modal, Bottomsheet, make focus stay inside the element

[MihirSachdeva]

Feature Title

For components like Modal, Bottomsheet, make focus stay inside the element

Feature Description

When a Modal (or BottomSheet) is open, keyboard navigation using the Tab (and Shift + Tab) keys must be “trapped” inside that overlay. In other words, focus should cycle through only the interactive elements within the open modal/bottom sheet, and never jump to elements behind or outside of it.

Reproduction Steps:

• Open a Modal or BottomSheet (for example: https://grauity.newtonschool.co/?path=/story/elements-modal--component)
• Press Tab (or Shift + Tab) repeatedly.
• Observe that focus currently moves to elements beneath the modal/bottomsheet (can also go to the browser URL bar) -- we need to prevent this

This behavior matches what Material-UI’s component provides: once open, Tab navigation is constrained to the dialog’s internal elements (e.g. buttons, inputs), and never escapes to the page beneath https://mui.com/material-ui/react-dialog

Use Case

Why This Matters

Accessibility: Keyboard-only users and assistive technologies rely on predictable focus order. Without focus trapping, users can become “lost” navigating behind the modal, making the UI unusable.

Usability: Trapping focus keeps users oriented within the current context, preventing accidental interaction with background elements.

Standards Compliance: Conforming to WAI-ARIA Authoring Practices for dialogs ensures consistency across components and aligns with widely adopted patterns.

Alternatives Considered

No response

Additional Context

https://zachpatrick.com/blog/how-to-trap-focus-inside-modal-to-make-it-ada-compliant

[MihirSachdeva]

If we can think of a generic solution here, which we can use for Modal and Bottomsheet (and other future components which would need focus trapping), that would be the goal!

[DikshantJangra]

We can create a reference to the modal using modalRef.
Then, we define a CSS selector to grab all focusable elements inside the modal.
Next, we add a keydown event listener to trap focus within the modal, preventing the Tab key from moving focus outside.
If needed, we can automatically focus the first focusable element when the modal opens.
Finally, we clean up by removing the event listener when the modal closes or is unmounted.

else,
✅ Done changes using focus-trap-react successfully.