BottomSheet & Drawer
When dealing with Drawers/BottomSheets, we need to take care of:
- Check if animations are enabled
- Handling the focus
- Can be dismissed
- Focus stays inside it
Expectations
- When: The user enables the Reduce Motion option
- Then: The BottomSheet/Drawer should not animate its entrance
- When: The BottomSheet/Drawer is displayed
- Then: The first element inside it should receive the focus
- And: The user should not be able to focus any item underneath it
- And: The user should be able to dismiss it, without dragging
- Then: The first element inside it should receive the focus
1. Animations
If the user has enabled the Reduce Motion accessibility setting, refrain from using animations for presenting or hiding the BottomSheet/Drawer. Only the fade animation is allowed as an exception.
2. Handling the focus
When a modal window or drawer is opened, it's essential to shift the focus to it or its contents. If not, the user remains on the previously active control, potentially missing or unable to access the newly presented content.
3. Can be dismissed
If the BottomSheet/Drawer can be closed by dragging, ensure there's also a close button or allow users to dismiss it by tapping the overlay layer surrounding it.
4. The focus stays inside it
Ensure that when the BottomSheet/Drawer is open, the user's focus is restricted to its content. Elements beneath it should not be accessible to prevent confusion, ensuring that the user can only navigate within its content.