Skip to main content

BottomSheet & Drawer

When dealing with Drawers/BottomSheets, we need to take care of:

  1. Check if animations are enabled
  2. Handling the focus
  3. Can be dismissed
  4. Focus stays inside it

Expectations

Assistive Technology: Reduce Motion
  • When: The user enables the Reduce Motion option
    • Then: The BottomSheet/Drawer should not animate its entrance
Assistive Technology: Screen Reader
  • 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

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.