UX/UI design / DIJION
Where should focus go when a bottom sheet opens?
A task-based plan distinguishing modal and nonmodal bottom sheets, including focus, dismissal and keyboard behavior.
A panel sliding up from the bottom may look small while changing navigation substantially. In an illustrative filter sheet, can someone still interact with the list behind it, or must they dismiss the panel first? Deciding only height and corner radius leaves keyboard and screen-reader behavior undefined.
Decide whether the sheet is modal
A modal sheet restricts interaction with the background; a nonmodal sheet needs a different contract. W3C’s modal-dialog pattern describes moving focus inside, keeping Tab navigation within the dialog and restoring focus appropriately on close. Apply the relevant platform mechanisms for native apps rather than assuming the web implementation transfers unchanged.
Make initial focus support the task
Scroll the table horizontally to see all columns.
| Sheet | Initial focus | Close destination |
|---|---|---|
| Short selection | Suitable option or heading | Opening control |
| Long explanation | Start of content | Previous context |
| Opening card removed | Safe task starting point | Surviving neighbor or list |
Keep the keyboard from obscuring the task
Automatically focusing a search field can open the keyboard and cover much of the sheet. That may be inappropriate when people first need to inspect available options. With the keyboard open, check access to the title, errors and Apply action. Consider a layout responsive to content and the usable viewport rather than a rigid height.
Keep dismissal semantics consistent
Dragging down, using Close, navigating Back and tapping outside should not produce unexplained differences. Are changes applied immediately or held as a draft until Apply? Align that decision with every dismissal path. Explain any lost edits; do not assume closing always means saving or always means canceling.
Navigate the sheet with different inputs
- Open and close with touch, keyboard and a screen reader.
- Inspect background escape with Tab and reverse Tab.
- Reach Apply with enlarged text and the keyboard open.
- Remove the opening item while the sheet is open and check returned focus.
Record sheet type, initial focus, change policy and close destination. These four decisions explain the behavior that a visual mockup alone cannot define.